Тег <aside>

Тег <aside> (укр. – “в стороні”) використовується для позначення додаткового контенту, який є доповненням до основного змісту сторінки. Зазвичай, це контент, який розташовується збоку (наприклад, бокова панель, віджети, оголошення, цитати, посилання на пов’язані матеріали тощо).

Контент, розміщений у <aside>, не є обов’язковим для розуміння основного змісту, але може бути корисним як супровідна інформація.

Атрибути

Специфічні атрибути

Тег <aside> не має специфічних атрибутів.

Глобальні атрибути

  • id — унікальний ідентифікатор елемента, що може бути використаний для зв’язування стилів чи скриптів. Наприклад:
<aside id="related-posts">
	<!-- Контент бічної панелі -->
</aside>
  • class — задає класи для застосування стилів через CSS. Наприклад:
<aside class="sidebar">
	<!-- Контент бічної панелі -->
</aside>
  • style — інлайн-стилізація елемента. Наприклад:
<aside style="background-color: #f5f5f5;">
	<!-- Контент бічної панелі -->
</aside>
  • title — текстовий опис, що може відображатися при наведенні курсора. Наприклад:
<aside title="Корисна інформація">
	<!-- Контент бічної панелі -->
</aside>

Приклад використання

<aside class="sidebar">
    <h2>Корисні посилання</h2>
    <ul>
        <li><a href="#article1">Стаття 1</a></li>
        <li><a href="#article2">Стаття 2</a></li>
    </ul>
</aside>

Додаткові моменти

  • Використовуйте <aside>, якщо контент можна вилучити без втрати смислу основного тексту, або, якщо елемент виконує роль доповнення (наприклад, посилання на пов’язані статті, цитати, віджети).
  • Кожен блок <aside> повинен мати заголовок (<h1>–<h6>), щоб чітко вказувати на його зміст. Якщо заголовок не передбачений дизайном, можна скористатися патерном visually-hidden, щоб його візуально приховати, але лишити доступним для пошукових систем та асистивних технологій.
  • Уникайте використання <aside> для контенту, який має критичне значення для основного тексту — у таких випадках використовуйте теги <section> або <article>.
  • Тег <aside> може бути розташований як усередині <article>, так і поза ним.
  • Використання <aside> сприяє покращенню семантики та доступності сторінки, особливо для користувачів, які користуються асистивними технологіями.