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 .