<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>.