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

Базовая Широко доступная

Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

Элемент <figure> HTML представляет собой содержательный контент, потенциально с необязательной подписью, которая задаётся с помощью элемента <figcaption>. Рисунок, его подпись и его содержимое рассматриваются как единый блок.

Попробуйте

Атрибуты

Этот элемент включает только глобальные атрибуты.

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

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

Примеры

Изображения

html

<!-- Just an image -->
<figure>
  <img src="favicon-192x192.png" alt="The beautiful MDN logo." />
</figure>

<!-- Image with a caption -->
<figure>
  <img src="favicon-192x192.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><b>Edsger Dijkstra:</b></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 dishevelled 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>

Результат

Техническое описание

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

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

Спецификация
HTML Стандарт # the-figure-element

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`figure`	8	12	4	11	5.1	18	4	11	5	1.0	4.4

См. также

Элемент <figcaption>.

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure