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

Question

Arthur_Sp @Arthur_Sp

HTML

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

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

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

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

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

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

Вопрос задан более двух лет назад
184 просмотра

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 и CSS

3 месяца

Далее
Stepik

Основы HTML и CSS

2 недели

Далее
OTUS

HTML/CSS

3 месяца

Далее

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

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

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

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

HTML

Простой
При клике на кастомную кнопку “Скачать” не происходит переход, хотя JS-обработчик отрабатывает. Как решить?
- 1 подписчик
- 29 окт.
- 128 просмотров
0

ответов
HTML

+1 ещё

Простой
Как создать карточки в рядах со смещением?
- 1 подписчик
- 28 окт.
- 85 просмотров
1

ответ
HTML

+1 ещё

Простой
Как в руководстве steam сделать обтекающий картинку текст?
- 1 подписчик
- 08 окт.
- 133 просмотра
1

ответ
HTML

+1 ещё

Средний
Скачал плагин image preview в вс коде, чтобы установить иконку сайта. Иконка появилась в браузере, но не появилась слева напротив строки. Почему так?
- 1 подписчик
- 30 сент.
- 153 просмотра
1

ответ
HTML

+1 ещё

Простой
От какой технической характеристики компьютера зависит скорость работы сайта, указанного ниже?
- 1 подписчик
- 24 сент.
- 464 просмотра
2

ответа
HTML

+1 ещё

Простой
Как убрать линии у бейджиков в Markdown?
- 1 подписчик
- 23 сент.
- 209 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как менять картинки у карточки в списке товаров?
- 4 подписчика
- 22 сент.
- 357 просмотров
1

ответ
HTML

+1 ещё

Средний
Как правильно сочетать теги article, section и заголовки h1-h6?
- 2 подписчика
- 21 сент.
- 244 просмотра
2

ответа
PHP

+1 ещё

Простой
Можно ли писать функции в текст?
- 1 подписчик
- 19 сент.
- 487 просмотров
2

ответа
JavaScript

+1 ещё

Простой
Как подключить библиотеку?
- 1 подписчик
- 13 сент.
- 629 просмотров
3

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

Верстальщик / фронтендер для браузерного расширения

DevTeam.Space

от 1 000 до 2 000 $

Специалист технической поддержки (чат)

WebSoft

от 50 000 до 70 000 ₽

Web-разработчик

ЭНДИ Консалтинг

от 40 000 до 40 000 ₽

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

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

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

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

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

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

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