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

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

Спецификация Статус Комментарии
HTML Living Standard
Определение '<figure>' в этой спецификации.
Живой стандарт
HTML 5.2
Определение '<figure>' в этой спецификации.
Рекомендация No changes from HTML 5.0.
HTML5
Определение '<figure>' в этой спецификации.
Рекомендация

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
figureChrome Полная поддержка 8Edge Полная поддержка ДаFirefox Полная поддержка 4IE Полная поддержка 9Opera Полная поддержка 11Safari Полная поддержка 5.1WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка 11Safari iOS Полная поддержка 5.1Samsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка

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