Элемент <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>
Результат

Листинг кода:
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!');