Тег <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.