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

<figcaption>

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

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

Синтаксис

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

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

Атрибуты

Нет.

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

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

Пример 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>

Ссылки