Семантика ≠ эстетика
HTML — не просто язык разметки. Это язык смысла.
Теги вроде <div> — «пустые коробки»: они группируют, но не говорят зачем.
Семантические теги (<header>, <main>, <footer>) — как этикетки на коробках в архиве: сразу ясно, что внутри и зачем оно нужно.
Браузеры, скринридеры, поисковики — все читают эти метки. Игнорируете их — ломаете доступность, SEO и будущую поддержку кода.
<header> — «фасад здания»
Назначение:
Контейнер для вводной информации о текущем контексте.
Это может быть шапка всего документа (логотип, навигация), но также — шапка статьи, секции, даже <aside>.
Ключевые нюансы:
- Может быть несколько <header> на странице (например, у <article> и у <section>).
- Не обязан находиться вверху визуально — семантика ≠ позиция.
- Часто содержит <h1>–<h6>, но не обязательно (например, логотип-ссылка без заголовка).
Что НЕ делать:
→ Оборачивать весь контент до <main> в <header>.
→ Дублировать <header> и <nav>: <nav> — часть <header>, если это навигация по сайту.
В книге — это титульный лист + оглавление первой главы. У каждой главы — своя «шапка».
<main> — «ядро реактора»
Назначение:
Контейнер для уникального, центрального контента страницы — того, ради чего пользователь сюда пришёл.
Всё остальное (меню, подвал, боковые блоки) — вторично.
Ключевые нюансы:
- Только один <main> на страницу.
- Не должен быть потомком <article>, <aside>, <footer>, <header> или <nav>.
- Обязательно должен быть «основным»: если убрать всё остальное — <main> останется самодостаточным.
Что НЕ делать:
→ Класть в <main> глобальную навигацию или копирайт.
→ Использовать <main> как обёртку для «всего контента под шапкой» — если там есть sidebar, он вне <main>.
В газете — это основная статья на первой полосе. Реклама, кроссворд, колонка редактора — вокруг, но не внутри.
<footer> — «печатная марка документа»
Назначение:
Контейнер для заключительной информации о текущем контексте:
— для всего документа: копирайт, контакты, ссылки на политики;
— для статьи: дата публикации, автор, теги;
— для секции: дополнительные ресурсы по теме.
Ключевые нюансы:
- Как и <header>, может быть много <footer> (например, у <article> и у <body>).
- Не обязан быть внизу экрана — но логически завершает контекст.
- Может содержать <nav> (например, «страницы сайта» в подвале).
Что НЕ делать:
→ Делать <footer> контейнером для «всего, что внизу» — если там форма подписки на главную тему страницы, она может быть в <main>.
→ Дублировать <footer> и <small>: <small> — для мелких юридических формулировок внутри <footer>.
В научной статье — это references, дата получения, авторские данные. У каждой статьи в сборнике — свой «хвост».
Почему это не «мелочи»? Три серьёзных последствия
- Доступность:
Скринридеры (VoiceOver, JAWS) используют семантику для навигации. <main> — это «прыжок к содержанию» (skip link). Без него — пользователь слеп/с нарушением моторики вынужден прослушать всё меню. - SEO:
Google индексирует структуру. <main> помогает алгоритмам понять, где ключевой контент, а где — шаблонные блоки. Это влияет на релевантность и сниппеты. - Поддержка кода:
Через 6 месяцев вы (или коллега) откроете разметку. <div class="header"> vs <header> — разница между «угадай, что это» и «сразу ясно».
Итог: Не «украшайте» — структурируйте
<header>, <main>, <footer> — не стилистические хелперы.
Это семантические маркеры для машин и людей.
Их задача — ответить на три вопроса:
→ Где начало контекста? (<header>)
→ Где суть? (<main>)
→ Где его логическое завершение? (<footer>)
HTML без семантики — как чертёж без подписей слоёв: технически валиден, но опасен в эксплуатации.