<figure>: Элемент иллюстрации с необязательной подписью

Интерактивный пример

HTML-элемент <figure> (Иллюстрация с необязательной подписью) представляет самостоятельный контент, часто с подписью (заголовком), которая указывается с помощью элемента (<figcaption>). Диаграмма и её подпись представляет собой единое целое.

Категории контента	Основной поток, секционный корень, явный контент
Разрешённое содержимое	Элемент `<figcaption>` за которым следует основной поток; или поточный контент за которым следует элемент `<figcaption>`; или поточный контент.
Пропуск тегов	Нет, открывающий и закрывающий теги обязательны.
Разрешённые родители	Любые элементы принимающие основной поток.
Разрешённые ARIA-роли	`group`, `presentation`
DOM-интерфейс	`HTMLElement`

Атрибуты

Этот элемент поддерживает только глобальные атрибуты.

Примечания по использованию

Обычно <figure> это рисунок, иллюстрация, диаграмма, фрагмент кода, и т.д., на который ссылаются в основном потоке документа, но может быть перенесён в другую часть документа или в приложение не нарушив основной поток.
Являясь секционным корнем, структура содержимого элемента <figure> исключается из основной структуры документа.
Подпись может быть связана с элементом <figure> с помощью вставки <figcaption> внутри него (как первый или последний потомок). Первый элемент <figcaption> в иллюстрации предоставляет её подпись (заголовок).

Примеры

Иллюстрации

<!-- Just an image -->
<figure>
  <img
  src="https://developer.mozilla.org/static/img/favicon144.png"
  alt="The beautiful MDN logo.">
</figure>

<!-- Image with a caption -->
<figure>
  <img
  src="https://developer.mozilla.org/static/img/favicon144.png"
  alt="The beautiful MDN logo.">
  <figcaption>MDN Logo</figcaption>
</figure>

Фрагменты кода

<figure>
  <figcaption>Get browser details using <code>navigator</code>.</figcaption>
  <pre>
function NavigatorExample() {
  var txt;
  txt = "Browser CodeName: " + navigator.appCodeName + "; ";
  txt+= "Browser Name: " + navigator.appName + "; ";
  txt+= "Browser Version: " + navigator.appVersion  + "; ";
  txt+= "Cookies Enabled: " + navigator.cookieEnabled  + "; ";
  txt+= "Platform: " + navigator.platform  + "; ";
  txt+= "User-agent header: " + navigator.userAgent  + "; ";
  console.log("NavigatorExample", txt);
}
  </pre>
</figure>

Цитирования

<figure>
  <figcaption><cite>Edsger Dijkstra:</cite></figcaption>
  <blockquote>If debugging is the process of removing software bugs,
  then programming must be the process of putting them in.</blockquote>
</figure>

"Если отладка — процесс удаления ошибок, то программирование должно быть процессом их внесения", — Эдсгер Дейкстра.

Стихи

<figure>
  <p style="white-space:pre">
Bid me discourse, I will enchant thine ear,
  Or like a fairy trip upon the green,
Or, like a nymph, with long dishevell'd hair,
  Dance on the sands, and yet no footing seen:
Love is a spirit all compact of fire,
  Not gross to sink, but light, and will aspire.</p>
  <figcaption><cite>Venus and Adonis</cite>,
    by William Shakespeare</figcaption>
</figure>

Спецификации

Specification
HTML Standard # the-figure-element

Поддержка браузерами

BCD tables only load in the browser

Смотрите также

Элемент <figcaption>.