Семантические теги: разметка со смыслом
header, nav, main, section, article, aside, footer — и почему div стоит держать на последнем месте.
Что ты научишься делать
- Разложишь страницу на смысловые области вместо безликих блоков
- Поймёшь, чем article отличается от section
- Переразметишь див-суп так, чтобы структура читалась без CSS
#Проблема: браузер видит коробки, а не смысл
Долгое время всю страницу собирали из одного тега — div. Он ничего не значит: просто прямоугольник, к которому можно применить стили.
Такую страницу человек читает нормально: он видит, что вверху шапка, сбоку меню. А вот программа не видит ничего. Для неё это двадцать одинаковых коробок.
#Кому это нужно на самом деле
- Незрячим людям. Программа чтения с экрана умеет прыгать сразу к
mainили перечислить все области страницы. По дивам прыгать некуда — придётся слушать всё подряд. - Поисковикам. Текст внутри
mainважнее текста вfooter. Без семантики они равнозначны. - Браузерам. Режим чтения в Safari и Firefox вырезает всё лишнее и показывает только
article. Без семантики он не работает. - Тебе через полгода. Открыть чужой (или свой старый) код и увидеть
<nav>вместо<div class="nv2">— совсем другое дело.
#Основные теги-области
| Тег | Что это | Сколько на странице |
|---|---|---|
header | Шапка: логотип, название, иногда меню и поиск | Один общий, плюс свои у article |
nav | Блок навигации: главное меню, оглавление, хлебные крошки | Столько, сколько меню |
main | Главное содержимое страницы, ради которого человек пришёл | Ровно один |
section | Смысловой раздел с заголовком | Сколько угодно |
article | Самостоятельная единица: статья, карточка товара, комментарий | Сколько угодно |
aside | Побочное: врезка, «читайте также», реклама | Сколько угодно |
footer | Подвал: контакты, копирайт, ссылки | Один общий, плюс свои у article |
<body> <header> <h1>Кофейня «Полка»</h1> <nav> <ul> <li><a href="/">Главная</a></li> <li><a href="/menu.html">Меню</a></li> </ul> </nav> </header> <main> <article> <h2>Как мы обжариваем зерно</h2> <p>Каждую неделю привозим свежую партию…</p> </article> <aside> <h2>Читайте также</h2> <p>Чем отличается раф от латте.</p> </aside> </main> <footer> <p>ул. Гоголя, 12 · © 2026</p> </footer></body>#section или article: как выбрать
Оба тега — про «кусок содержимого с заголовком». Разница в самостоятельности.
article — то, что имеет смысл отдельно от страницы. Если этот кусок можно вырезать и опубликовать в другом месте, и он останется понятным, — это article. Статья, новость, карточка товара, отзыв, комментарий.
section — часть чего-то большего. Отдельно смысла не имеет: «Ингредиенты» без рецепта бесполезны.
Так не надо
<div class="header">
<div class="logo">Полка</div>
<div class="menu">…</div>
</div>
<div class="content">…</div>Классы нужны только для CSS. Программа чтения с экрана их не видит: для неё это четыре одинаковых блока без ролей.
Так надо
<header>
<p class="logo">Полка</p>
<nav>…</nav>
</header>
<main>…</main>Те же четыре блока, но теперь у каждого есть роль. Классы остались там, где действительно нужны для оформления.
#Когда div всё-таки нужен
div не запрещён — он просто не первый выбор. Он честно нужен, когда блок существует только ради оформления: обёртка для центрирования, контейнер для сетки, слой для градиента.
Правило: сначала ищи подходящий смысловой тег. Не нашёл — бери div, и это нормально.
#Ещё несколько полезных тегов
| Тег | Для чего |
|---|---|
figure / figcaption | Иллюстрация с подписью — уже знаком по пятому уроку |
time | Дата или время в машиночитаемом виде: <time datetime="2026-09-07">7 сентября</time> |
address | Контакты автора или организации |
blockquote | Цитата в отдельном блоке |
details / summary | Раскрывающийся блок без единой строчки JavaScript |
mark | Подсветка найденного или важного фрагмента |
#Проверка без стилей
Есть простой способ понять, хороша ли твоя разметка: отключи CSS и посмотри на страницу. Если она читается сверху вниз как осмысленный документ — заголовок, меню, текст, подвал — разметка в порядке.
Если получилась каша, в которой непонятно, где что, — значит, смысл держался на оформлении, а не на тегах.
Где спотыкаются почти все
Несколько тегов main на странице
Почему main означает «главное содержимое этой страницы». Оно может быть только одно, иначе слово теряет смысл.
Как надо Один main. Внутри него — сколько угодно section и article.
section вместо div ради «семантичности»
Почему Обёртка для сетки не является смысловым разделом. Лишние section засоряют структуру документа пустыми разделами без заголовков.
Как надо Есть заголовок и смысл — section. Только вёрстка — div.
nav вокруг каждой ссылки
Почему nav помечает блок навигации, а не отдельную ссылку. Десять nav на странице делают навигацию бесполезной.
Как надо Оборачивай nav только вокруг настоящих групп навигации: главное меню, оглавление, хлебные крошки.
header используют только для шапки сайта
Почему Тег означает «вводная часть блока». У article тоже может быть свой header с заголовком и датой.
Как надо Помни: header и footer относятся к ближайшему блоку, а не обязательно ко всей странице.
- Семантика semantics
- Смысл, который тег сообщает о своём содержимом, независимо от оформления.
- Ориентир landmark
- Область страницы, к которой голосовая программа умеет прыгнуть напрямую: main, nav, header, footer.
- Див-суп div soup
- Разметка, целиком собранная из
divбез смысловых тегов. - Блочный элемент block element
- Занимает всю ширину строки и начинается с новой:
div,p,section. - Строчный элемент inline element
- Живёт внутри строки текста:
span,a,strong.
Проверь себя
<code>main</code> — главное содержимое всей страницы. Оно одно, иначе программа чтения не поймёт, куда прыгать.
Карточку можно вырезать и показать отдельно — она останется понятной. Это признак <code>article</code>.
Если у блока нет смысла, а есть только оформительская задача, — это как раз работа для <code>div</code>.
Верных вариантов несколько.
Внешний вид семантика почти не меняет — этим занимается CSS. Всё остальное перечисленное она действительно даёт.
Оба тега не несут смысла. Разница только в поведении: <code>div</code> — блочный, <code>span</code> — строчный.
Задание
Разобрать див-суп
Перед тобой страница, собранная из одних div. Замени их на подходящие семантические теги: шапку — на header, меню — на nav, основное содержимое — на main, статью — на article, подвал — на footer. Классы можешь убрать: они больше не нужны.
Подсказка 1
Меняй только имена тегов: <div class="header"> становится <header>, закрывающий </div> — </header>.
Подсказка 2
Не забудь, что nav лежит внутри header, а article — внутри main.
Показать решение
<header> <h1>Кофейня «Полка»</h1> <nav> <ul> <li><a href="/">Главная</a></li> <li><a href="/menu.html">Меню</a></li> </ul> </nav></header><main> <article> <h2>Как мы обжариваем зерно</h2> <p>Каждую неделю привозим свежую партию из Эфиопии.</p> </article></main><footer> <p>ул. Гоголя, 12</p></footer>