HTML-тег <aside>
Тег HTML <aside> определяет вспомогательный контент, например боковую панель, и создаёт ARIA-ориентир complementary для доступности.
Тег <aside> — один из элементов HTML5, предназначенный для определения раздела с контентом, косвенно связанным с основным содержимым страницы. Как правило, он используется для дополнения статьи вспомогательной информацией или выделения фрагментов, которые могут быть интересны пользователю. Содержимое <aside> является самостоятельной, необязательной частью веб-страницы — если его удалить, основной контент не пострадает.
Сноски, комментарии, списки терминов, справочная информация, наборы ссылок, выносные цитаты и т. д. — всё это примеры контента, который может размещаться внутри элемента <aside>.
Не путайте элемент <aside> с боковой панелью. Боковая панель — это лишь визуальный элемент, и тег <aside> внешне не обязательно выглядит как боковая панель.
Не используйте элемент <aside> для текста в скобках: он предназначен для косвенного контента, а не для встроенного или дополнительного текста внутри основного потока.
Этот элемент можно применять для типографических эффектов при оформлении контента, отделённого от основного содержимого страницы. Например, он подходит для библиографии, выносных цитат, дополнительных информационных комментариев и т. п.
Зачем использовать <aside>? Доступность и SEO
Главная причина выбора <aside> вместо обычного контейнера — семантика. Элемент <aside> на уровне страницы (расположенный за пределами любого <article> или <section>) соответствует ARIA-роли ориентира complementary. Это имеет практические последствия:
- Программы чтения с экрана выставляют его как ориентир. Пользователи вспомогательных технологий могут просматривать список ориентиров и переходить непосредственно к области «complementary», точно так же как к
<nav>и<main>. Обычный<div>такого ориентира не создаёт. - Он уточняет структуру документа. Поисковые системы и инструменты доступности строят структурную карту страницы;
<aside>сообщает им, что данный блок является вспомогательным, а не основным контентом. - Он сигнализирует о намерении другим разработчикам. Разметка сама по себе документирует, что контент является косвенным и может быть удалён.
Элемент <aside> всегда несёт неявную ARIA-роль complementary. Однако когда он вложен внутрь <article> (или <section>), его область видимости ограничена этим контентом, и программы чтения с экрана, как правило, не выставляют его как ориентир верхнего уровня страницы — он воспринимается как связанный со статьёй, а не со страницей в целом.
Если на странице находится более одного <aside>, дайте каждому уникальное доступное имя с помощью aria-label или aria-labelledby, чтобы пользователи программ чтения с экрана могли различать ориентиры:
<aside aria-label="Author bio">…</aside>
<aside aria-labelledby="related-heading">
<h2 id="related-heading">Related articles</h2>
…
</aside>Синтаксис
Тег <aside> используется парами. Содержимое записывается между открывающим (<aside>) и закрывающим (</aside>) тегами.
Пример HTML-тега <aside>:
HTML-тег <aside>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<main>
<p>I like watching Game of Thrones.</p>
</main>
<aside>
<h4>Game of Thrones</h4>
<p>Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels</p>
</aside>
</body>
</html>Результат
<aside> внутри <article>
Здесь <aside> расположен внутри <article>. Основной контент идёт первым, а aside следует за ним в виде заметки «А знаете ли вы?», которая явно носит вспомогательный характер по отношению к конкретной статье. Поскольку он вложен, браузеры и программы чтения с экрана воспринимают его как относящийся к статье, а не как ориентир на уровне страницы.
Пример HTML-тега <aside> с тегом <article>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Example of the aside tag</h1>
<article>
<h2>Game of Thrones</h2>
<p>Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels.</p>
<aside>
<h3>Did you know?</h3>
<p>The series ran for eight seasons and won numerous Emmy Awards, becoming one of the most-watched shows in television history.</p>
</aside>
</article>
</body>
</html><aside> как боковая панель на уровне страницы и <aside> внутри статьи
Размещение <aside> меняет его смысл. Элемент <aside>, расположенный за пределами любого <article> или <section>, является aside на уровне страницы — как правило, боковой панелью со ссылками, рекламой или похожими материалами, поддерживающей всю страницу. Элемент <aside>, расположенный внутри <article>, поддерживает только эту статью.
<body>
<main>
<article>
<h2>How to brew pour-over coffee</h2>
<p>Heat the water to about 94°C, then pour slowly in circles…</p>
<!-- In-article aside: tangential to THIS article -->
<aside>
<h3>Tip</h3>
<p>A gooseneck kettle makes the pour much easier to control.</p>
</aside>
</article>
</main>
<!-- Page-level aside: a sidebar supporting the whole page -->
<aside aria-label="Related guides">
<h2>More guides</h2>
<ul>
<li><a href="/french-press">French press</a></li>
<li><a href="/cold-brew">Cold brew</a></li>
</ul>
</aside>
</body>На одной странице можно использовать несколько элементов <aside>, причём они могут быть вложены на разных уровнях. Каждому aside на уровне страницы задавайте aria-label или aria-labelledby, чтобы его ориентир имел уникальное имя.
Разница между тегами <aside> и <div>
Элемент <div> является универсальным контейнером без семантического значения — для вспомогательных технологий он структурно невидим и не предоставляет ничего, кроме текста внутри него. Элемент <aside> на уровне страницы, напротив, создаёт ориентир complementary, к которому пользователи программ чтения с экрана могут переходить напрямую. Это различие влияет на доступность и SEO.
Сравните два подхода к разметке боковой панели:
<!-- Before: no semantics, just a styled box -->
<div class="sidebar">
<h2>Related links</h2>
<ul>…</ul>
</div>
<!-- After: a navigable complementary landmark -->
<aside aria-label="Related links">
<h2>Related links</h2>
<ul>…</ul>
</aside>Когда всё же использовать <div>? Обращайтесь к <div>, когда обёртка служит исключительно для стилизации или вёрстки (ячейка сетки, flex-обёртка, оболочка карточки) и не несёт самостоятельного вспомогательного смысла. Если блок является поддерживающим, но необязательным контентом — предпочтите <aside>; если это просто крючок для CSS — <div> является правильным выбором.
Атрибуты
Тег <aside> поддерживает глобальные атрибуты и атрибуты событий.
Пример с глобальным атрибутом:
<aside class="sidebar-note" id="extra-info">
<p>Additional context goes here.</p>
</aside>Как стилизовать HTML-тег <aside>
Элемент <aside> не имеет стилей по умолчанию, поэтому обычно вы добавляете собственные. Цвета ниже приведены в качестве иллюстрации — в рабочем коде используйте дизайн-токены или именованные значения вместо буквальных hex-значений:
aside {
background-color: whitesmoke;
border-left: 4px solid lightgray;
padding: 10px;
}Поддержка браузерами и история
Элемент <aside> был введён в HTML5 и поддерживается всеми современными браузерами. До HTML5 разработчики размечали тот же контент с помощью универсального контейнера, например <div id="sidebar">, который не передавал никакого смысла браузерам, поисковым системам или вспомогательным технологиям. Семантический элемент <aside> заменяет этот паттерн.
Связанные элементы
<article>— самодостаточный контент, который<aside>нередко дополняет.<main>— основной контент документа.<section>— тематическая группировка контента.<nav>— ещё один элемент-ориентир, предназначенный для навигационных ссылок.