Перейти к содержимому

HTML-тег <figcaption>

Тег <figcaption> является одним из элементов HTML5. Он используется для добавления подписи или пояснений к содержимому тега <figure>. Тег <figcaption> размещается внутри <figure> в качестве первого или последнего дочернего элемента. Если разместить его первым, подпись появится над содержимым фигуры, а если последним — под ним.

В элементе <figure> можно использовать только один <figcaption>. Однако <figure> также может содержать другие теги (например, <img> или <code>).

Синтаксис

Тег <figcaption> является парным. Содержимое записывается между открывающим тегом <figcaption> и закрывающим (</figcaption>) тегами.

Пример использования HTML-тега <figcaption>:

HTML-тег <figcaption>

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Image of a baby</p>
    <figure>
      <img src="https://ru.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200" />
      <figcaption>Fig.1 – Cute baby</figcaption>
    </figure>
  </body>
</html>

Результат

figcaption example

Атрибуты

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

Как стилизовать HTML-тег <figcaption>

По умолчанию браузеры отображают элемент <figcaption> как блочный. Вы можете настроить его внешний вид с помощью CSS:

css
figcaption {
  font-style: italic;
  color: #555;
  text-align: center;
  margin-top: 5px;
}

Практика

Какова функция HTML-тега <figcaption>?

Считаете ли это полезным?

Предпросмотр dual-run — сравните с маршрутами Symfony на продакшене.