Семантические теги говорят браузеру и поисковику, что за кусок контента перед ними. Разберём четыре тега: nav, aside, section, article. Только суть и примеры.
nav — навигация
Тег нужен для блоков с ссылками, которые помогают перемещаться: меню, пагинация, «хлебные крошки».
Пример:
<nav aria-label="Основное меню"> <ul> <li><a href="/">Главная</a></li> <li><a href="/catalog">Каталог</a></li> <li><a href="/articles">Статьи</a></li> </ul> </nav>
Зачем: скринридеры сразу понимают, что это навигация, и дают быстрый переход. Поисковик видит структуру сайта.
Правило: не кладите в nav всё подряд. Если в блоке только одна ссылка или это не навигация — не оборачивайте в nav.
aside — второстепенный контент
Это блок, который связан со страницей, но не является её основой: боковая панель, фильтры, блок «Читайте также», подписка, краткая справка. Если убрать aside, основной смысл страницы не теряется.
Пример (боковая панель в каталоге):
<aside class="catalog-sidebar"> <form class="filter-form"> <fieldset> <legend>Фильтры</legend> <!-- поля фильтров --> </fieldset> </form> </aside>
Пример (блок «Читайте также» в статье):
<aside class="related-content"> <h3>Похожие статьи</h3> <ul> <li><a href="/articles/2">Ещё про выбор товаров</a></li> </ul> </aside>
Зачем: отделить вспомогательный контент от основного. Это помогает доступности и делает верстку понятнее.
section — смысловой раздел
Тег группирует контент по смыслу внутри страницы. Раздел не обязан быть самостоятельным: это часть чего‑то большего. У section почти всегда должен быть заголовок.
Примеры: «Преимущества», «Как это работает», «Популярные товары», главы статьи.
Пример:
<section aria-labelledby="features-heading"> <h2 id="features-heading">Преимущества</h2> <p>Тут список преимуществ.</p> </section>
Когда не нужен: если вы просто группируете элементы для стилизации (например, сетка карточек) и смыслового раздела нет — можно оставить div. Семантика нужна там, где есть логика раздела.
article — самостоятельный контент
Контент, который имеет смысл сам по себе: статья, новость, карточка товара, комментарий, пост на форуме. Его можно вынести отдельно — и он останется понятным.
Примеры:
- каждая статья в ленте;
- каждый товар в каталоге;
- каждый комментарий.
Пример карточки товара:
<article class="product-card"> <a href="/products/123"> <img src="/img/prod-123.jpg" alt="Название товара: ключевые характеристики"> <h3>Название товара</h3> <span class="price">1 500 ₽</span> </a> </article>
Пример комментария:
<article class="comment"> <header> <h4>Алексей Петров</h4> <time datetime="2024-08-24T12:34:00">24.08.2024, 12:34</time> </header> <p>Полезный комментарий к статье.</p> </article>
Как они работают вместе
Пример типичной страницы:
<body> <header> <a href="/" class="logo">Лого</a> <nav aria-label="Основное меню">...</nav> </header> <main> <section aria-labelledby="popular-heading"> <h2 id="popular-heading">Популярные товары</h2> <div class="grid"> <article class="product-card">...</article> <article class="product-card">...</article> </div> </section> <aside class="sidebar-promo"> <h3>Подписка на рассылку</h3> <!-- форма --> </aside> </main> <footer>...</footer> </body>
Здесь:
nav— навигация;section— смысловой блок «Популярные товары»;article— самостоятельные карточки;aside— вспомогательный блок с подпиской.
Частые ошибки
- Класть всю сетку в
article. Правильнее:sectionдля раздела, а внутри негоarticleдля каждой карточки. - Использовать
asideдля основного контента. Если блок — главная часть страницы, это неaside. - Оборачивать в
navне-навигацию. Например, кнопки действий («Купить», «В корзину») не являются навигацией. - Ставить
sectionбез заголовка. Чаще всего это признак того, что нужен неsection, а просто контейнер для стилей.
Загрузка...