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

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

Категории контента Основной поток, секционный корень, явный контент
Допустимое содержимое Элемент <figcaption> за которым следует основной поток; или поточный контент за которым следует элемент <figcaption>; или поточный контент.
Пропуск тегов Нет, открывающий и закрывающий теги обязательны.
Допустимые родители Любые элементы принимающие основной поток.
Допустимые ARIA-роли group, presentation
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
# the-figure-element

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
figure

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

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