Дорогой друг!

Справочник HTML переехал на новый сайт с коротким и простым адресом webref.ru. Там справочник регулярно обновляется и пополняется. Он актуальнее, лучше, полнее и содержит ряд интересных возможностей. На htmlbook.ru справочник HTML больше обновляться не будет и со временем закроется. Переходи на сайт webref.ru и пользуйся им на здоровье.

Тег <figure>


Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 8.0+ 9.2+ 5.0+ 4.0+ 2.1+ 3.0+

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

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Используется для группирования любых элементов, например, изображений и подписей к ним.

Синтаксис

<figure>
...
</figure>

Атрибуты

Нет.

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

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Тег FIGURE</title>
  <script>
   document.createElement('figure');
   document.createElement('figcaption');
  </script>
  <style>
   figure {
    background: #5f6a72; /* Цвет фона */
    padding: 10px; /* Поля вокруг */
    display: block; /* Блочный элемент */
    width: 150px; /* Ширина */
    float: left; /* Блоки выстраиваются по горизонтали */
    margin: 0 10px 10px 0; /* Отступы */
    text-align: center; /* Выравнивание по центру */
   }
   figcaption {
    color: #fff; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <article>
   <figure>
    <p><img src="images/thumb1.jpg" alt="" /></p>
    <figcaption>Софийский собор</figcaption>
   </figure>
   <figure>
    <p><img src="images/thumb2.jpg" alt="" /></p>
    <figcaption>Польский костел</figcaption>
   </figure>
  </article>
 </body>
</html>

Результат данного примера показан на рис. 1.

Использование тега <figure>

Рис. 1. Использование тега <figure>

Браузеры

Internet Explorer до версии 8.0 включительно игнорирует тег <figure>, но отображает его содержимое. Также в этом браузере любые стили не применяются к элементу, пока он не создан через скрипт, как показано в примере.

Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.

Браузеры Firefox и Chrome автоматически добавляют к <figure> свойство margin со значением 1em 40px.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.