<figure> ^HTML

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

<figure> не должен быть связан непосредственно с основным содержимым документа и при его перемещении в другое место смысл текста не должен меняться. Обычно применяется для иллюстраций, фрагментов кода, схем, графиков, диаграмм и др.

Синтаксис

<figure>
...
</figure>

Закрывающий тег обязателен.

WAI ARIA

Значение role по умолчанию: figure

Допустимые значения role:

group
none
presentation

Атрибуты

Нет.

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

Примеры

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

В начало

<figure> HTML