Тег <aside> обозначает содержимое, связанное с основным лишь косвенно: боковую колонку, врезку с дополнительным фактом, блок "Читайте также", сноску. Проверить просто - если убрать такой блок, основной текст останется понятным. Тег парный, атрибуты у него только глобальные.
В этой статье
Для чего нужен тег aside в HTML
Страница редко состоит из одного только основного текста. Рядом почти всегда есть что-то сопутствующее: рубрики и метки, подборка похожих материалов, короткая справка об авторе, интересный факт в рамке. Всё это и размечают тегом <aside>.
Оформления он не добавляет - блок выглядит как обычный <div>, пока его не оформили в CSS. Меняется только смысл: программа, разбирающая страницу, понимает, что этот кусок вторичен. Скринридер предложит его как дополнительный блок, поисковый робот не спутает его с текстом статьи, а режим чтения в браузере уберёт из выжимки.
<main>
<article>
<h1>Как выбрать первый ноутбук</h1>
<p>Текст статьи...</p>
</article>
<aside aria-label="Похожие материалы">
<h2>Читайте также</h2>
<ul>...</ul>
</aside>
</main>Где на странице размещают aside
Название тега сбивает с толку сильнее, чем у любого другого в этой группе. Кажется, что <aside> - это про сторону, то есть про боковую колонку. На деле спецификация говорит не про расположение, а про связь: блок может стоять где угодно, хоть во всю ширину под статьёй, и остаться правильным <aside>. И наоборот - не всё, что сверстано сбоку, им является.
Разберите макет: нажмите на любую зону и посмотрите, какой тег ей подходит.
Нажмите на зону макета:
Три зоны из семи размечаются тегом aside. Попробуйте угадать какие.
Не aside. Шапка сайта - это тег header.
Она не сопутствует содержимому, а открывает страницу, и повторяется на всём сайте.
Не aside. Для меню есть тег nav.
Путаница тут частая: боковое меню верстают сбоку, и рука тянется к aside. Но навигация по сайту - это навигация, каким бы боком она ни стояла.
Не aside. Это основное содержимое - тег article внутри main.
Ради него страницу и открыли: убрать его нельзя, иначе не останется ничего.
Да, aside. Врезка дополняет статью, но не входит в её ход изложения.
Она находится внутри <article>, и как раз из-за этого её роль зависит от того, есть ли у неё название - разобрано ниже.
Да, aside. Подборка других материалов связана со статьёй только по теме.
Вот наглядный случай того, что тег не про сторону: блок стоит во всю ширину под текстом и всё равно остаётся правильным <aside>.
Да, aside. Рубрики и метки помогают ориентироваться, но к тексту статьи прямого отношения не имеют.
Это тот самый учебный случай. Если такая колонка стоит рядом с <main>, роль дополнительного блока она получает сразу, без дополнительных атрибутов.
Не aside. Подвал размечается тегом <footer>.
Как и шапка, он относится ко всему сайту, а не сопутствует содержимому конкретной страницы.
Из семи зон тегом <aside> размечаются три, и ни одну из них нельзя определить по расположению - только по связи с основным содержимым.
aside внутри статьи: врезка и примечание
Кроме общей боковой колонки у <aside> есть второе применение - внутри самой статьи. Так размечают врезку с любопытным фактом, короткое пояснение термина, примечание, которое можно пропустить без потери нити.
<article>
<p>Первая часть статьи...</p>
<aside aria-label="Интересный факт">
<p>Первый ноутбук весил больше десяти килограммов.</p>
</aside>
<p>Продолжение статьи...</p>
</article>Пример: как выглядит врезка в тексте
Интересный фактПервый ноутбук весил больше десяти килограммов.
Рамка и отступ у врезки - работа CSS, сам тег ничего не рисует. Важно другое: <aside> не годится для попутного пояснения прямо в предложении. Текст в скобках спецификация прямо относит к основному потоку, и оборачивать его этим тегом не нужно - для таких вставок хватает обычной пунктуации.
Роль complementary и когда она пропадает
Тут начинается то, что пересказывают неточно почти везде. Обычно пишут коротко: скринридер объявляет <aside> дополнительным блоком, ориентиром complementary. Для боковой колонки это правда, а для врезки внутри статьи - нет.
Спецификация сопоставления ролей разводит два случая. Если <aside> находится в области <body> или <main>, роль complementary он получает безусловно. Если же он вложен в <article>, <section>, <nav> или другой <aside>, эту роль он получает только при наличии доступного названия - иначе остаётся с ролью generic, то есть для скринридера неотличим от обычной обёртки.
Название даётся так же, как разделу: атрибутом aria-label с текстом или атрибутом aria-labelledby, связанным с заголовком внутри блока.
<article>
<aside>...</aside>
<!-- роль generic: для скринридера это просто блок -->
<aside aria-label="Интересный факт">...</aside>
<!-- роль complementary: блок попадает в список ориентиров -->
</article>И это не особенность одного тега, а общее правило всей группы, которое стоит увидеть целиком.
| Тег | Ориентир есть | Ориентира нет |
|---|---|---|
| header | Прямо в <body>: роль banner |
Внутри статьи или раздела |
| section | С названием: роль region | Без названия: роль generic |
<aside> |
В <body> или <main>, а внутри статьи - с названием: роль complementary |
Внутри статьи без названия: роль generic |
Закономерность одна: чем глубже тег вложен, тем важнее дать ему название. Снаружи его роль понятна по месту, внутри - только по названию.
Чем aside отличается от section и div
Все три тега блочные и внешне неразличимы, а выбирают между ними по тому, чем содержимое приходится основному тексту.
<div> не сообщает о содержимом ничего - это обёртка для вёрстки. Тег section обозначает часть основного содержимого: раздел "Услуги" - именно то, зачем пришли на страницу компании. <aside> обозначает то, что рядом: убрать - и страница не потеряет сути.
Практическая проверка занимает секунду. Мысленно вычеркните блок со страницы. Если без него пропал смысл - это <section> или article. Если страница осталась понятной, а ушло лишь удобство - это <aside>. Если не изменилось вообще ничего, кроме отступов, - это <div>.
Частые ошибки
Почти все промахи с этим тегом растут из его названия: его выбирают по тому, где блок стоит, а не по тому, чем он является.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
В <aside> обёрнута любая боковая колонка |
Если сбоку стоит меню или основной текст, разметка сообщает неправду | Выбирать тег по содержимому: меню - <nav>, текст - <article> |
В <aside> вынесена часть основного текста |
Поисковый робот и режим чтения считают этот кусок второстепенным | Оставить в <aside> только то, что можно убрать без потери сути |
Врезка внутри статьи без aria-label |
Роль остаётся generic, и в списке ориентиров блока нет | Дать название атрибутом или заголовком через aria-labelledby |
Тегом <aside> обёрнут текст в скобках внутри предложения |
Блочный тег разрывает абзац, а по спецификации такой текст относится к основному потоку | Оставить скобки как есть, без отдельного тега |
Вопросы и ответы
Чем aside отличается от nav?
Содержимым, а не расположением. В nav находится навигация по сайту - меню, хлебные крошки, пагинация. В aside - сопутствующие материалы: рубрики, метки, подборка похожих статей. Боковая колонка может содержать и то, и другое: тогда меню внутри неё размечается тегом nav, а остальное остаётся в aside.
Можно ли прописать aside внутри header?
Спецификация этого не запрещает, но повод встречается редко: шапка сама по себе вводная часть, и сопутствующему блоку там обычно нечего делать. Если внутри шапки нужен дополнительный блок, сначала стоит проверить, не подходит ли ему nav или обычный div.
