HTML таг aside

Пример

Кратък пример как се използва тагът <aside>.

<article class="container my-4">
  <h1 class="h3">Как да подобрим продуктивността си</h1>
  <p>В тази статия ще разгледаме няколко техники за по-добро управление на времето...</p>

  <aside class="bg-light border rounded p-3 mt-3">
    <h2 class="h6">Бързи съвети</h2>
    <ul class="mb-0">
      <li>Планирай деня си предварително</li>
      <li>Работи на кратки фокусирани интервали</li>
      <li>Изключи ненужните нотификации</li>
    </ul>
  </aside>
</article>

Дефиниция и употреба

Елементът <aside> представлява част от съдържанието, която е свързана тематично с основното съдържание на страницата или статията, но не е неговата основна линия. Обикновено се използва за странични панели, кутии с допълнителна информация, цитати, свързани линкове, реклами, биография на автора, списъци с препоръчани статии и др.

<aside> може да се използва както вътре в <article> (като допълнение към конкретна статия), така и на ниво страница (като общ страничен панел за целия сайт). Семантичното му значение помага на търсачки, четци за екран и други инструменти да разберат, че съдържанието вътре е второстепенно или допълнително.

Няма специфични атрибути за <aside>, но могат да се използват всички глобални HTML атрибути (като id, class, style, aria-* и др.). В комбинация с Bootstrap 5.3 най-често се добавят класове за оформление като .bg-light, .border, .p-3, .col-* и др., за да се позиционира и стилизира страничният блок.

Browser Support

Browser	Поддръжка
Chrome	✔️
Firefox	✔️
Edge	✔️
Safari	✔️
Opera	✔️

Атрибути