Тег <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.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

<div>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<dl>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<option>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<ul>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023