HTML таг figure
Пример
Кратък пример как се използва тагът <figure>.
<figure class="figure text-center">
<img src="https://via.placeholder.com/400x250" class="figure-img img-fluid rounded" alt="Примерно изображение">
<figcaption class="figure-caption">Фигура 1: Примерно изображение с надпис под него.</figcaption>
</figure>Дефиниция и употреба
Елементът <figure> се използва за групиране на самостоятелно съдържание (обикновено илюстрации, изображения, диаграми, кодови блокове, схеми, таблици и др.), което е свързано със съдържанието на страницата, но може да бъде преместено или цитирано независимо от основния текст.
Обикновено вътре в <figure> се поставя и елементът <figcaption>, който служи за описание или заглавие на фигурата. <figcaption> може да бъде първи или последен елемент в <figure>.
Основни характеристики:
- Семантичен елемент – помага на търсачки и помощни технологии да разберат, че съдържанието е „фигура“ с описание.
- Самостоятелност – съдържанието в
<figure>трябва да има смисъл дори и извън основния текст. - Комбинация с <figcaption> – за добавяне на заглавие/описание към фигурата.
Типична употреба:
- Изображения с надпис под тях.
- Кодови примери с описание.
- Диаграми, графики и таблици, които се цитират в текста като „Фигура 1“, „Фигура 2“ и т.н.
В комбинация с Bootstrap 5.3 често се използват класове като .figure, .figure-img и .figure-caption за по-добро оформление и отзивчив дизайн.
Browser Support
| Browser | Поддръжка |
|---|---|
 Chrome |
✔️ |
 Firefox |
✔️ |
 Edge |
✔️ |
 Safari |
✔️ |
 Opera |
✔️ |
Атрибути
Този елемент няма специфични атрибути.