<aside>
- 25 января 2023
Тег <aside>
используется для размещения контента, который не является главным, но связан с основным контентом на странице. Обычно это боковая колонка с информацией, например, баннеры, навигационные ссылки, блоки социальных сетей или реклама.
Синтаксис тега <aside>
<aside>
<h2>Заголовок боковой колонки</h2>
<p>Содержимое боковой колонки</p>
</aside>
Спецификация HTML
Тег является частью спецификации HTML Living Standard.
Семантический или нет
Тег <aside>
считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого. Он помогает разделять содержимое на главное и вспомогательное, что улучшает доступность и понимание структуры страницы.
Примеры использования
Создание боковой колонки с навигационными ссылками, которые связаны с основным контентом на странице:
<main>
<h1>Заголовок страницы</h1>
<p>Основной контент страницы</p>
</main>
<aside>
<h2>Навигация по странице</h2>
<ul>
<li><a href="#section1">Раздел 1</a></li>
<li><a href="#section2">Раздел 2</a></li>
<li><a href="#section3">Раздел 3</a></li>
</ul>
</aside>
Размещение баннера или рекламы в боковой колонке:
<main>
<h1>Заголовок страницы</h1>
<p>Основной контент страницы</p>
</main>
<aside>
<h2>Реклама</h2>
<a href="#">
<img src="banner.jpg" alt="Баннер">
</a>
</aside>
Размещение блоков социальных сетей или подписки на новости в боковой колонке:
<main>
<h1>Заголовок страницы</h1>
<p>Основной контент страницы</p>
</main>
<aside>
<h2>Следите за нами</h2>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
</ul>
<form>
<label for="email">Подпишитесь на нашу рассылку</label>
<input type="email" id="email" name="email">>
<button type="submit">Подписаться</button>
</form>
</aside>
Для чего использовать тег <aside>
- Создание боковой колонки с содержимым, связанным с основным контентом на странице, таким как навигация, подписка на новости, блоки социальных сетей или реклама.
- Выделение блоков контента для привлечения внимания пользователя, например, цитат, ссылок на другие страницы или примеров кода.
- Размещение информации, которая не является главной, но может быть полезна для пользователей, например, список рекомендуемых статей на блоге или галерея изображений.
Атрибуты тега <aside>
У тега <aside>
нет специфических атрибутов.
Глобальные атрибуты
Тег поддерживает все глобальные атрибуты HTML.
Ограничения
- Тег не должен использоваться для размещения главного контента на странице.
- Не рекомендуется использовать более одного
<aside>
на странице. - Не стоит использовать тег внутри
<article>
,<section>
,<nav>
или других элементов, предназначенных для структурирования документа.
Поддержка браузерами
Тег поддерживается всеми современными браузерами. Актуальная информация — на caniuse.
Альтернативные теги
Если вам нужно разместить вспомогательный контент, можете использовать тег <div>
с соответствующим классом. Однако тег <aside>
больше подходит для такого контента.
Чем заменить тег
Тег <aside>
сложно заменить, потому что он семантичен. Но если вы по какой-то причине не хотите его использовать, можете заменить тег на <div>
с соответствующим классом или другой семантический тег, такой как <section>
или <nav>
.
Актуальность
Тег <aside>
является актуальным и поддерживается HTML.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023