У каждого из этих тегов - свой тест на применимость. nav - для действительно значимой навигации, а не любой группы ссылок. article - для содержимого, которое имеет смысл само по себе, в отрыве от страницы. section - для тематического блока, у которого есть (или мог бы быть) собственный заголовок; если заголовка нет и не предвидится - это просто div. aside - для содержимого, лишь косвенно связанного с окружающим текстом, независимо от того, где оно расположено на экране.
В этом уроке
Все четыре тега сразу: nav отдельно вверху, а внутри article - тематический section со своим заголовком и aside с сопутствующим блоком. Попробуй убрать заголовок h3 у section - смысл блока станет менее понятным, хотя визуально почти ничего не изменится.
Ссылки на другие страницы в HTML: тег nav
nav предназначен для действительно значимых блоков навигации - главного меню сайта, оглавления, постраничной навигации. Не каждая группа ссылок нуждается в nav: спецификация прямо называет пример - список ссылок в подвале (условия использования, главная, копирайт) вполне обходится обычным footer без отдельного nav внутри.
<nav><a href="/">Главная</a> <a href="/blog">Блог</a></nav> - главное меню сайта, значимый блок навигации.
<footer><nav><a href="/terms">Условия</a></nav></footer> - для одной мелкой ссылки в подвале отдельный nav избыточен, самого footer уже достаточно.
Самостоятельный блок контента в HTML: тег article
article - это содержимое, которое имеет смысл САМО ПО СЕБЕ, в отрыве от остальной страницы: пост в блоге, статья, комментарий, карточка товара. Проверочный вопрос простой: если вырвать этот блок и показать его отдельно (например, в RSS-ленте), останется ли он осмысленным? Если да - это article.
<article><h2>Заголовок поста</h2><p>Текст поста целиком.</p></article> - пост понятен сам по себе, вне контекста страницы.
<article>поэтому</article> - одно слово без контекста ничего не значит само по себе - не самостоятельный контент, article здесь не подходит.
Тематический блок с заголовком в HTML: тег section
section - это тематическая группа содержимого, у которой обычно есть собственный заголовок. Если у блока нет заголовка и не предполагается - скорее всего, это просто обёртка для стилей, и правильный выбор здесь div, а не section. section - не замена div "для солидности".
<section><h3>Отзывы читателей</h3>...</section> - тематический блок с собственным заголовком, законное место для section.
<section class="wrapper">...</section> - section использован просто как обёртка для CSS, без заголовка и тематического смысла - здесь нужен div.
Сопутствующий блок в HTML: тег aside
aside - это содержимое, лишь косвенно связанное с окружающим текстом: врезка-цитата, реклама, блок похожих материалов. Важно: aside определяется ОТНОШЕНИЕМ к содержимому, а не расположением на экране - врезка-цитата посреди статьи тоже может быть aside, хотя визуально это не боковая колонка.
<aside>Похожие статьи по теме</aside> - содержимое, отдельное от основного текста по смыслу, независимо от расположения на странице.
<aside>Продолжение той же мысли, что и в предыдущем абзаце</aside> - если текст на самом деле является частью основного повествования, а не косвенным дополнением, aside здесь не подходит.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Использовать section как обычную обёртку для стилей | Блок без тематического заголовка не проходит тест section - правильный тег здесь div | Спрашивать себя: есть ли у блока (потенциальный) заголовок? Если нет - div |
| Оборачивать в nav вообще любую группу ссылок | Мелкие ссылки (например, в подвале) не нуждаются в nav - самого footer достаточно | Использовать nav только для действительно значимых блоков навигации |
| Использовать article для контента, который не имеет смысла сам по себе | Блок не проходит тест "будет ли он понятен, если показать его отдельно" | Использовать article только для по-настоящему самостоятельного содержимого |
| Путать aside с "визуальным сайдбаром" | aside определяется отношением к содержимому, а не местом на странице - врезка в основной колонке тоже может быть aside | Судить по смысловой связи с текстом, а не по расположению на экране |
Шпаргалка
| Тег | Когда использовать |
|---|---|
| nav | Только для значимых блоков навигации - не для каждой мелкой группы ссылок |
| article | Содержимое, понятное само по себе в отрыве от страницы (пост, комментарий, карточка товара) |
| section | Тематический блок с (потенциальным) заголовком; без заголовка - используй div |
| aside | Содержимое, косвенно связанное с текстом - независимо от расположения на экране |
Коротко: отвечаем на вопросы
Когда использовать section, а когда div?
Если блок - тематическая группа содержимого, у которой есть (или могла бы быть) собственный заголовок, и он логично попал бы в оглавление страницы - это section. Если блок нужен только для стилизации или как обёртка для скрипта, без собственной темы - используй div.
Может ли article содержать section, и наоборот?
Да, работает в обе стороны. Длинная статья может делиться на section-части (главы), а section с заголовком "Похожие посты" может содержать несколько отдельных article - карточек с превью других статей.
Обязательно ли aside должен быть визуально сайдбаром?
Нет. aside определяется отношением содержимого к окружающему тексту (косвенная связь), а не местом на странице - врезка-цитата посреди основной колонки текста тоже может быть aside, даже если это не боковая панель.
Сколько тегов nav может быть на одной странице?
Может быть несколько - например, один для навигации по всему сайту, другой для навигации внутри самой страницы (оглавление). Чтобы скринридер мог их различить, каждому nav стоит дать своё название через aria-label.
