Перейти к содержанию

<figure>

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

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

Демо

Изображения и мультимедиа

Синтаксис

1
<figure>...</figure>

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

Атрибуты

Нет.

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

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!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>

Ссылки

Комментарии