Как улучшить HTML-код?

Question

Arthur_Sp @Arthur_Sp

HTML

Как улучшить HTML-код?

Для практики подобрал макет в фигме. По нему написал HTML. На стили особо не смотрите (до CSS не дошёл пока). Вписал, чтобы немного облегчить восприятие.

Если есть совет по улучшению разметки, оставьте в комментариях. Особенно меня интересует оформление отзывов без div, мнение по вставке звёзд (см. в макете; через img, svg или CSS?) и варианты разметки двух блоков навигации в футере.

Ссылка на код (без фото и svg)

Ссылка на макет

P.S. если нужен пример с отображением фото, пишите. Залью всё на Glitch и кину ссылку.

Вопрос задан 20 авг. 2023
172 просмотра

7 комментариев

Подписаться 1 Средний 7 комментариев

Владислав Лысков @Vlatqa Куратор тега HTML

Ну в main у тебя не может быть не хедера не футера

Написано 21 авг. 2023
Arthur_Sp @Arthur_Sp Автор вопроса

Не совсем так. Согласно действующей спецификации <header> и <footer> могут обозначать вводный раздел и нижний колонтитул разделов.

По классике их обычно используют для обёртки шапки и подвала всей веб-страницы (тогда они прямые потомки <body>). Но на этом их возможности не заканчиваются.

Ну здесь с футером я соглашусь. Забыл вынести его за рамки <main>. А вот с <header> всё ок. Первый - для шапки веб-страницы. Остальные - для вводной информации в каждом разделе.

Написано 21 авг. 2023
Arthur_Sp @Arthur_Sp Автор вопроса

Владислав Лысков, то есть в теории такая запись возможна. Есть какие-то серьёзные последствия её использования?

Написано 21 авг. 2023
Владислав Лысков @Vlatqa Куратор тега HTML

Arthur_Sp, нет, можешь вообще забить на семантику, она просто так придумана, делай всё на дивах

Написано 21 авг. 2023
Arthur_Sp @Arthur_Sp Автор вопроса

Владислав Лысков, не стоит бросаться в крайность. Ты прекрасно понимаешь: наплевал бы я на семантику, код выглядел по-другому. Я не сторонник блочной вёрстки. Меня волнует следующее: почему это нарушение семантики, если оно не противоречит спецификации?

Написано 21 авг. 2023
Вадим @MrDecoy Куратор тега HTML
Ну раз уж Вы ударились по семантике(что похвально), то давайте подумаем вот о чём:

Вкусовщина, но, мне кажется, h1 у Вас маркетинговый слоган, а не важный по смыслу заголовок. С точки зрения поисковой выдачи не очень релевантный. А h1 важен для поисковой выдачи.

Что нам говорит тэг article? Что это некий по смыслу самодостаточный блок сайта, который может быть спокойно перемещён куда угодно. Какой у Вас заголовок у article? "Последние эпизоды". Эпизоды чего? Возможно это понятно было бы пользователю в контексте сайта, но тоже сомневаюсь, так как см. пункт1. По иерархии заголовков получаем: "Возвысь свой подкаст на следующий уровень - Последние эпизоды". То есть, сайт будто бы по смыслу про то, как сделать подкасты лучше. А потом бац, сразу следом, как дочерний - последние эпизоды. То есть как-то не сходится. Тут либо h1, либо h2 либо и то и то для ux стоит уточнить.

alt у контентно значимых картинок должен описывать то, что на картинке изображено. Не в деталях, а коротко, контентно значимую вещь. Если alt говорит что "это превью для эпизода №3" - то это либо плохой alt (лучше вообще никакого) либо изображение контентно ничего не стоит и лучше сделать фоновой картинкой.

в форме у инпутов нет label. Это не хорошо. placeholder не решает большого количества ux проблем.

Вам стоит почитать про оформление отзывов. Раз уж Вы ударяетесь по семантике. Хорошей статьи под рукой на нешёл. Вот первое из гугла что вроде более-менее: https://techrocks.ru/2019/12/11/quoting-in-html/.

У ссылок должен быть либо доступно скрытый контент, либо aria-label. Пустые ссылки или картинки с альтом - не самый лучший для доступности вариант. Тем более когда альт просто подписан как название соц сети. не понятно. Ну ссылка это на соц сеть. "Изображение. Twitter. Ссылка" - вот что озвучит скринридер. А куда конкретно? Не понятно.

Ну а по поводу количества header - действительно всё валидно и верно. Правда нюанс в том, что "прекрасное далёко". Идея семантической разметки была очень красивая, но реализация\поддержка в браузерах скринридерах и поисковых системах не везде так хороша, как хотелось бы. Да и изначальная идея, на практике, столкнулась с некоторыми сложностями. Я не могу однозначно сказать есть ли польза от того, что у Вас в каждом article\section есть свой header. Поэтому перед тем как так делать стоит либо удостовериться поискав в интернете успешные истории использования такой разметки, либо проверить самому. И учесть не только доступность для пользователей, но и SEO.
Написано 21 авг. 2023
Arthur_Sp @Arthur_Sp Автор вопроса

Вадим, благодарю за развёрнутую критику.

Написано 21 авг. 2023

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

HTML

+1 ещё

Простой
Как изменить строчку кода HTML на чужом сайте tampermonkey?
- 2 подписчика
- 2 часа назад
- 86 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Добавление определенного класса к header при прокрутке до определенного блока?
- 1 подписчик
- 4 часа назад
- 34 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Как лучше обратиться к кнопке через id или через class?
- 2 подписчика
- 16 часов назад
- 108 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Галерея 3DWave. Перевел HTML в JS. Не работает.?
- 1 подписчик
- вчера
- 81 просмотр
0

ответов
HTML

+3 ещё

Простой
Flask вывод изображения из базы данных?
- 1 подписчик
- вчера
- 77 просмотров
1

ответ
JavaScript

+4 ещё

Простой
Почему при загрузке страницы происходит быстрый скролл вниз, а затем вверх?
- 1 подписчик
- 30 апр.
- 91 просмотр
1

ответ
JavaScript

+3 ещё

Средний
Swiper js, как сделать чтобы при фокусе по табу на ссылке внутри слайда не исчезала пагинация?
- 1 подписчик
- 30 апр.
- 46 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему нельзя нажать на кнопку третьего элемента в Splide JS?
- 1 подписчик
- 29 апр.
- 76 просмотров
1

ответ
HTML

+1 ещё

Простой
Почему не срабатывает анимация при исчезновение?
- 1 подписчик
- 28 апр.
- 50 просмотров
1

ответ
HTML

+1 ещё

Средний
Как зафиксировать данные блоки, чтобы не было разрывов?
- 1 подписчик
- 28 апр.
- 72 просмотра
1

ответ
Показать ещё Загружается…

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Сверстать +- 10 страниц популярного гэмблинг сайта

02 мая 2024, в 14:54

15000 руб./за проект

Ищем сотрудника для поиска заказов

02 мая 2024, в 14:51

10 руб./за проект

Поправить футер сайта на Next SCSS

02 мая 2024, в 14:44

500 руб./за проект

Ну в main у тебя не может быть не хедера не футера
Не совсем так. Согласно действующей спецификации <header> и <footer> могут обозначать вводный раздел и нижний колонтитул разделов.

По классике их обычно используют для обёртки шапки и подвала всей веб-страницы (тогда они прямые потомки <body>). Но на этом их возможности не заканчиваются.

Ну здесь с футером я соглашусь. Забыл вынести его за рамки <main>. А вот с <header> всё ок. Первый - для шапки веб-страницы. Остальные - для вводной информации в каждом разделе.
Владислав Лысков, то есть в теории такая запись возможна. Есть какие-то серьёзные последствия её использования?
Arthur_Sp, нет, можешь вообще забить на семантику, она просто так придумана, делай всё на дивах
Владислав Лысков, не стоит бросаться в крайность. Ты прекрасно понимаешь: наплевал бы я на семантику, код выглядел по-другому. Я не сторонник блочной вёрстки. Меня волнует следующее: почему это нарушение семантики, если оно не противоречит спецификации?
Вадим, благодарю за развёрнутую критику.

Как улучшить HTML-код?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт