<figcaption> ^HTML

Become a Patron!

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

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

Синтаксис

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

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

WAI ARIA

Нет значения role по-умолчанию.

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

group
none
presentation

Атрибуты

Нет.

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

Примеры

Пример 1

<!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

<!-- 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>

В начало

<figcaption> HTML