| 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>
Атрибути
Ні.
Закриваючий тег
Обов'язковий.
Приклад
HTML5 IE Cr Op Sa Fx
<!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.
Браузери
Internet Explorer до версії 8.0 включно ігнорує тег <figure> , але відображає його вміст. Також в цьому браузері будь-які стилі не застосовуються до елементу, поки він не створений через скрипт, як показано в прикладі.
Firefox повністю підтримує цей тег починаючи з версії 4.0, але версії 3.0 і старше також коректно відображають вміст тега.
Браузери Firefox і Chrome автоматично додають до <figure> властивість margin із значенням 1em 40px .