HTML тег figure

Тег <figure> используется для группирования самодостаточного контента, например, иллюстраций, диаграмм, фотографий, примеров кода и т.д.

Хотя содержимое элемента <figure> относится к основному потоку, его позиция является независимой от основного потока и никак не влият на поток документа при удалении.

Чтобы добавить подпись для элемента <figure>, используется тег <figcaption>.

Разница между HTML 4.01 и HTML5

Тег <figure> был добавлен в HTML5.

Общие атрибуты

Тег <figure> поддерживает общие атрибуты и атрибуты-события.

HTML пример

Используем элемент <figure> для разметки фотографии:


<figure>
   <img src='img_pulpit.jpg' alt="The Pulpit Rock" width="304" height="228">
   <figcaption>Гора в Норвегии</figcaption>
</figure>

CSS стили по умолчанию

Большинство браузеров будут отображать тег <figure> со следующими стилями


figure { 
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 40px;
    margin-right: 40px;
}