Тег aside в HTML: когда дополнительному содержимому нужен отдельный элемент

Элемент <aside> обозначает содержимое, которое связано с окружающим материалом лишь косвенно. Это может быть список статей по теме, объяснение термина, краткая справка об авторе или примечание. Если удалить такой блок, основное повествование должно остаться понятным.

Название тега иногда переводят как «боковая панель», но расположение не определяет семантику. <aside> можно показать справа, снизу или внутри текста. И наоборот, колонка справа не становится <aside>, если в ней находится основная часть страницы.

Главный критерий выбора

Задайте два вопроса:

1. Связан ли блок с текущей страницей или разделом?
2. Сохранится ли основная мысль без него?

Если оба ответа положительные, <aside> подходит. Если блок необходим для понимания или выполнения основного действия, он должен оставаться частью основного содержимого.

<aside> внутри статьи

Вложенный элемент относится прежде всего к окружающей статье. Например, рядом с объяснением CSS можно дать короткий словарь:

<article>  <h1>Как работает каскад CSS</h1>  <p>Каскад выбирает итоговое значение свойства из подходящих объявлений.</p>​  <aside aria-labelledby="terms-title">    <h2 id="terms-title">Термины из этого раздела</h2>    <dl>      <dt>Специфичность</dt>      <dd>Вес селектора при сравнении правил одного уровня.</dd>    </dl>  </aside>​  <p>Сначала сравниваются происхождение и важность правил.</p></article>​

Такой справочник полезен, но статья не теряет смысл без него.

<aside> на уровне страницы

Если элемент находится рядом с <main>, он обычно дополняет страницу или сайт целиком:

<main>  <article>    <h1>Руководство по Flexbox</h1>    <p>...</p>  </article></main>​<aside aria-labelledby="related-title">  <h2 id="related-title">Связанные руководства</h2>  <ul>    <li><a href="/css/grid">Основы CSS Grid</a></li>    <li><a href="/css/gap">Как работает свойство gap</a></li>  </ul></aside>​

Визуально блок можно поместить в боковую колонку через CSS Grid, но порядок в HTML должен оставаться логичным и без стилей.

Несколько элементов <aside>

У <aside> есть неявная роль дополнительной области. Если таких областей несколько, пользователь скринридера должен различать их. Дайте каждой понятное название:

<aside aria-labelledby="author-title">  <h2 id="author-title">Об авторе</h2>  <p>Анна пишет о доступной веб-разработке.</p></aside>​<aside aria-labelledby="more-title">  <h2 id="more-title">Продолжить чтение</h2>  <ul>...</ul></aside>​

Видимый заголовок с aria-labelledby обычно лучше скрытого aria-label: он помогает всем читателям.

Когда <aside> не подходит

Основная навигация

Для главного меню существует <nav>. Не оборачивайте его в <aside> только потому, что меню расположено сбоку.

Обязательный шаг формы

Подсказка, без которой пользователь не заполнит поле, должна быть связана с полем через текст, <label> и при необходимости aria-describedby. Это не необязательное отступление.

Обычная обёртка для макета

Если контейнер нужен только для сетки, используйте <div>. Семантика не должна зависеть от положения на экране.

Секция основного материала

Большой раздел, раскрывающий тему статьи, лучше разметить <section> с заголовком. Он не становится дополнительным лишь потому, что редактор захотел выделить его рамкой.

Реклама и призывы к действию

Рекламный или промо-блок часто не относится к основной теме достаточно тесно. Выбор зависит от контекста: подборка курса по теме статьи может быть дополнительным материалом, а системный рекламный слот — нейтральным контейнером. В любом случае реклама должна быть явно обозначена для пользователя; один тег <aside> этого не делает.

<div class="advertisement">  <p>Реклама</p>  <a href="https://example.com" rel="sponsored">Курс по веб-разработке</a></div>​

Частые ошибки

• <aside> выбирают по координатам в макете, а не по смыслу;
• в блок переносят важную часть инструкции, которую нельзя пропустить;
• несколько дополнительных областей остаются без различимых названий;
• заголовок заменяют жирным <div>, из-за чего структура не видна в списке заголовков;
• внутрь помещают основное меню вместо <nav>.

Что запомнить

<aside> — это семантическое дополнение, а не команда «поставить справа». Определяйте его по связи с основным содержимым, добавляйте понятный заголовок и проверяйте, сохраняет ли документ смысл без этого блока. Расположение и оформление оставляйте CSS.

report Сообщить об ошибке в статье