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

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

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

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

Атрибуты

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

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

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

Примеры

Иллюстрации

html

<!-- 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>

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

html

<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>

Цитирования

html

<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>

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

Стихи

html

<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>.