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

Question

Arthur_Sp @Arthur_Sp

HTML

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

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

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

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

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

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

Вопрос задан более года назад
180 просмотров

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

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

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

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

Написано более года назад
Arthur_Sp @Arthur_Sp Автор вопроса

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

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

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

Написано более года назад
Arthur_Sp @Arthur_Sp Автор вопроса

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

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

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

Написано более года назад
Arthur_Sp @Arthur_Sp Автор вопроса

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

Написано более года назад
Вадим @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.
Написано более года назад
Arthur_Sp @Arthur_Sp Автор вопроса

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

Написано более года назад

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

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

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

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

HTML

+1 ещё

Простой
Можно ли задать стили внешнему тегу на основе вложенного?
- 1 подписчик
- 3 часа назад
- 49 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать универсальную HTML-ссылку на яндекс карты?
- 1 подписчик
- 20 часов назад
- 100 просмотров
0

ответов
HTML

Простой
Как записать кол-во успешных прохождений капчи/пароля на js?
- 1 подписчик
- вчера
- 68 просмотров
1

ответ
HTML

+1 ещё

Средний
Как создать такую вот кнопку как на изображении?
- 2 подписчика
- вчера
- 211 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как убрать экспоненциальную запись числа в input type=number?
- 1 подписчик
- вчера
- 90 просмотров
1

ответ
HTML

Простой
Как картинку сделать кнопкой?
- 1 подписчик
- 15 дек.
- 120 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Делаю видеоплеер и в полноэкранном режиме почему-то не видит div с моими контролами?
- 1 подписчик
- 13 дек.
- 81 просмотр
2

ответа
JavaScript

+2 ещё

Простой
Как добавить анимацию div?
- 1 подписчик
- 13 дек.
- 95 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как реализовать такой эффект в слайдере?
- 1 подписчик
- 12 дек.
- 133 просмотра
1

ответ
HTML

+1 ещё

Простой
Как адаптировать изображения так, чтобы при max-width 100% они не пропадали при ширине экрана 900Px?
- 1 подписчик
- 11 дек.
- 55 просмотров
1

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

CRM Bitrix24 разработчик

World Vision Clinic • Москва

от 170 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Frontend-разработчик JavaScript

div. • Ставрополь

от 40 000 до 90 000 ₽

Телеграм бот для автоматизации генерации текста с ChatGPT-o1

18 дек. 2024, в 15:28

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

Настройка контекстной рекламы для семейного центра в Новороссийске

18 дек. 2024, в 15:24

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

Юзабилити-тестирование сайта с мобильного — сегодня в 16:00 по МСК

18 дек. 2024, в 15:08

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

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

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

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

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

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

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

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