<figcaption> - HTML-елемент підпису до фігури

HTML-елемент <figcaption> представляє собою підпис або легенду, що описує вміст свого батьківського елемента <figure>.

Елемент <figcaption> надає семантичний спосіб зв'язати підпис безпосередньо з елементом <figure>. Це покращує доступність, оскільки допоміжні технології, такі як скрінрідери, можуть розпізнати та оголосити підпис як частину фігури, що полегшує розуміння контенту користувачами.

Вміст <figcaption> може включати будь-який потоковий контент, що дозволяє розміщувати в ньому не тільки текст, але й посилання, форматування та інші елементи.

Всередині одного елемента <figure> може бути лише один <figcaption>. Він може бути розміщений як перший або як останній дочірній елемент.

Тег <figcaption> приклад використання в HTML

HTML
<figure>
  ...
  <figcaption>...</figcaption>
</figure>

Атрибути

Цей тег може мати глобальні атрибути.

Технічне резюме

Категорія контенту	Немає.
Дозволений вміст	Потоковий контент.
Пропуск тегів	Жоден, початковий та кінцевий теги є обов’язковими.
Дозволені батьківські елементи	Елемент `<figure>`. `<figcaption>` має бути першим або останнім дочірнім елементом.
Роль ARIA	Немає відповідної ролі.
Дозволені ARIA ролі	`none`, `group`, `presentation`.
DOM інтерфейс	`HTMLElement`

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

<figure>
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Sunflower_from_Silesia2.jpg/800px-Sunflower_from_Silesia2.jpg"
    alt="Соняшник під блакитним небом">
  <figcaption>Рис. 1. Соняшник під блакитним небом.</figcaption>
</figure>

figure {
  margin: 0;
  border: 1px solid #ccc;
  padding: 1rem;
  border-radius: 8px;
}
figcaption {
  margin-top: 1rem;
  text-align: center;
  font-style: italic;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}

<figure>
  <figcaption>Приклад коду на JavaScript для виводу в консоль.</figcaption>
  <pre><code>console.log("Привіт, світе!");</code></pre>
</figure>

figure {
  margin: 0;
  border: 1px solid #ccc;
  padding: 1rem;
  border-radius: 8px;
  background: #f9f9f9;
}
figcaption {
  margin-bottom: 1rem;
  font-weight: bold;
  text-align: center;
}
pre {
  margin: 0;
  background: #eee;
  padding: 1rem;
  border-radius: 4px;
  text-align: left;
}

Стилі за замовчуванням

CSS
figcaption {
  display: block;
}

Підтримка браузерів



`<figcaption>`