Как улучшить HTML-код?
Для практики подобрал макет в фигме. По нему написал HTML. На стили особо не смотрите (до CSS не дошёл пока). Вписал, чтобы немного облегчить восприятие.
Если есть совет по улучшению разметки, оставьте в комментариях. Особенно меня интересует оформление отзывов без div, мнение по вставке звёзд (см. в макете; через img, svg или CSS?) и варианты разметки двух блоков навигации в футере.
Ссылка на код (без фото и svg)
Ссылка на макет
P.S. если нужен пример с отображением фото, пишите. Залью всё на Glitch и кину ссылку.
Дополнительно:
Ну в main у тебя не может быть не хедера не футера
По классике их обычно используют для обёртки шапки и подвала всей веб-страницы (тогда они прямые потомки <body>). Но на этом их возможности не заканчиваются.
Ну здесь с футером я соглашусь. Забыл вынести его за рамки <main>. А вот с <header> всё ок. Первый - для шапки веб-страницы. Остальные - для вводной информации в каждом разделе.
- Вкусовщина, но, мне кажется, 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 - действительно всё валидно и верно. Правда нюанс в том, что "прекрасное далёко". Идея семантической разметки была очень красивая, но реализацияподдержка в браузерах скринридерах и поисковых системах не везде так хороша, как хотелось бы. Да и изначальная идея, на практике, столкнулась с некоторыми сложностями. Я не могу однозначно сказать есть ли польза от того, что у Вас в каждом articlesection есть свой header. Поэтому перед тем как так делать стоит либо удостовериться поискав в интернете успешные истории использования такой разметки, либо проверить самому. И учесть не только доступность для пользователей, но и SEO.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для улучшения HTML-кода можно применить несколько методов:
1. Используйте семантические теги: вместо