Тег figure HTML

HTML - тег <figure> используется для указания автономного содержимого. Тег может содержать диаграммы, изображения, иллюстрации, примеры кода и т. д и является одним из элементов HTML5.

Тег <figure> - синтаксис и код

Тег <figure> представлен парами. Содержимое записывается между открывающим (<figure>) и закрывающим (</figure>) тегами.

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

<figure>
   <img src="/htm/New_York.jpg" alt="Нью-Йорк Сити" style="width:100%">
   <figcaption>Нью-Йорк Сити (Большое Яблоко).</figcaption>
</figure>

Пример

Места которые стоит посетить

Нью-Йорк, который часто называют Нью-Йорк Сити или Большое Яблоко, является самым густонаселенным городом в Соединенных Штатах.

Нью-Йорк Сити (Большое Яблоко).

Определение и использование

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

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

	✅ Поддерживает
	✅ Поддерживает
	✅ Поддерживает
	✅ Поддерживает
	✅ Поддерживает

Атрибуты

Глобальные атрибуты

Тег <figure> также поддерживает глобальные атрибуты в HTML

Атрибуты событий

Тег <figure> также поддерживает атрибуты событий в HTML

Настройки CSS по умолчанию

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

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

Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.