HTML тег <figure>

Элемент <figure> (от англ. "figure" ‒ «фигура, рисунок») используется для группирования самодостаточного контента, например, иллюстраций, диаграмм, фотографий, примеров кода и т.д.

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

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

Синтаксис

<figure>  
  ...
</figure>

Закрывающий тег

Обязателен.

Атрибуты

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

Стилизация по умолчанию

Большинство браузеров отобразит элемент <figure> со следующими значениями CSS по умолчанию:

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

Различия между HTML 4.01 и HTML5

Тег <figure> является новым в HTML5.

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

Элемент <figure>

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

Пример HTML:

Попробуй сам
<figure>
  <img src="ship320.jpg" alt="Корабль" width="320" height="180">
  <figcaption>Рис1. - Прогулочный корабль.</figcaption>
</figure>

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

Спецификация Статус
WHATWG HTML Living Standard (WHATWG) Живой стандарт
HTML5 (W3C) Рекомендация
HTML 5.1 (W3C) Рекомендация

Поддержка браузерами



Contema