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

Baseline

Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..

See full compatibility
Learn more

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

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

<figure>
  <img
    src="/shared-assets/images/examples/elephant.jpg"
    alt="Elephant at sunset" />
  <figcaption>An elephant at sunset</figcaption>
</figure>

figure {
  border: thin #c0c0c0 solid;
  display: flex;
  flex-flow: column;
  padding: 5px;
  max-width: 220px;
  margin: auto;
}

img {
  max-width: 220px;
  max-height: 150px;
}

figcaption {
  background-color: #222;
  color: #fff;
  font: italic smaller sans-serif;
  padding: 3px;
  text-align: center;
}

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

Атрибуты

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

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

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