Элемент <figure>

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

Обычно применяется для иллюстраций, фотографий, листингов кода, схем, графиков, диаграмм и другого медиаконтента.

Элемент <figure> может иметь только один элемент <figcaption>, при этом он должен располагаться в качестве первого или последнего дочернего элемента.

Категории	Потоковое содержимое, явное содержимое.
Синтаксис	`<figure>...</figure>`
Опускание тегов	Начальный и конечный теги обязательны.
Модель содержимого	Либо: один элемент `<figcaption>`, за которым следует потоковое содержимое. Либо: потоковое содержимое, за которым следует один элемент `<figcaption>`. Либо: потоковое содержимое.

Атрибуты

Для элемента <figure> доступны глобальные атрибуты и события.

Стиль по умолчанию

Стиль по умолчанию для элемента <figure>, определённый в спецификации HTML:

figure {
  display: block;
  margin-block: 1em;
  margin-inline: 40px;
}

Примеры

Изображение:

figure {
  max-width: 363px;
  margin: auto;
  padding: 5px;
  border: 5px double #404040;
}

figcaption {
  background-color: #404040;
  color: white;
  padding: 4px;
  text-align: center;
  font-style: italic;
}

<figure>
  <img src="butterfly.png" alt="Рисунок бабочки">
  <figcaption>
    Изображение, сгенерированное с помощью нейросети.
  </figcaption>
</figure>

Результат

Тег figcaption, изображение сгенерированное с помощью нейросети — Изображение, сгенерированное с помощью нейросети.

Листинг кода:

figure {
  background-color: #e6f9fe;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 15px;
  margin: 20px 0;
}

pre {
  background-color: #282c34;
  color: #61dafb;
  padding: 10px;
  border-radius: 3px;
}

code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1em;
}

figcaption {
  font-size: 0.9em;
  color: #555;
  margin-bottom: 7px;
  text-align: center;
}

<figure>
  <figcaption>
    Пример кода на JavaScript, выводящий сообщение в консоль.
  </figcaption>
  <pre><code>console.log('Hello, world!');</code></pre>
</figure>

Результат

Пример кода на JavaScript, выводящий сообщение в консоль.

console.log('Hello, world!');