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

<figcaption>

Тег <figcaption> (от англ. figure caption - подпись к рисунку) содержит описание для элемента <figure>.

<figcaption> должен быть первым или последним элементом в группе.

Демо

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

Синтаксис

1
2
3
<figure>
    <figcaption>Описание</figcaption>
</figure>

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

Атрибуты

Нет.

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

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

Пример 1

 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
33
34
35
36
37
38
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>FIGCAPTION</title>
        <style>
            figure {
                background: #d9dabb; /* Цвет фона */
                display: block; /* Блочный элемент */
                width: 150px; /* Ширина */
                height: 190px; /* Высота */
                float: left; /* Блоки выстраиваются по горизонтали */
                margin: 0 10px 10px 0; /* Отступы */
                text-align: center; /* Выравнивание по центру */
            }
            figure img {
                border: 2px solid #8b8e4b; /* Параметры рамки */
            }
            figure p {
                margin-bottom: 0; /* Отступ снизу */
            }
        </style>
    </head>
    <body>
        <article>
            <figure>
                <p><img src="image/thumb3.jpg" alt="" /></p>
                <figcaption>Купеческий клуб</figcaption>
            </figure>
            <figure>
                <p><img src="image/thumb4.jpg" alt="" /></p>
                <figcaption>
                    Памятник Св. Владимиру
                </figcaption>
            </figure>
        </article>
    </body>
</html>

Пример 2

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<!-- Just a figure -->
<figure>
    <img
        src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
        alt="An awesome picture"
    />
</figure>
<p></p>
<!-- Figure with figcaption -->
<figure>
    <img
        src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
        alt="An awesome picture"
    />
    <figcaption>Fig1. MDN Logo</figcaption>
</figure>
<p></p>

Ссылки

Комментарии