HTML тег <figcaption>

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

Элемент <figure> может содержать только один <figcaption>, однако сам по себе он может оборачивать самые разные самостоятельные блоки содержимого: <img>, листинг <code>, <table>, <blockquote>, диаграмму и многое другое.

Зачем использовать `<figcaption>` вместо `<p>`?

Можно поместить <p> рядом с изображением, и визуально результат будет выглядеть так же. Разница носит семантический характер и важна прежде всего с точки зрения доступности.

Когда подпись размечена как <figcaption> внутри <figure>, браузер программно связывает подпись с рисунком. Вспомогательные технологии, например программы чтения с экрана, объявляют их вместе — пользователь слышит, что перед ним рисунок, и его подпись как метку к нему. Обычный <p> — это просто несвязанный текст, расположенный рядом; машина не знает, что он относится к изображению.

Поэтому используйте <figure> + <figcaption> всегда, когда подпись является частью содержимого (и вы ожидаете, что при переверстке страницы они переместятся вместе). Обычный <p> подходит для рядового текста.

Синтаксис

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

<figure>
  <!-- figure content, e.g. an image, code block, or table -->
  <figcaption>Caption text</figcaption>
</figure>

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

HTML тег <figcaption>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Image of a baby</p>
    <figure>
      <img src="/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>, чтобы управлять расположением подписи. Ничего другого менять не нужно — важна только позиция элемента среди дочерних элементов <figure>.

Подпись под изображением (последний дочерний элемент):

<figure>
  <img src="diagram.png" alt="Request flow diagram" width="400" height="250" />
  <figcaption>Fig.1 – How a request travels through the app.</figcaption>
</figure>

Подпись над изображением (первый дочерний элемент):

<figure>
  <figcaption>Fig.1 – How a request travels through the app.</figcaption>
  <img src="diagram.png" alt="Request flow diagram" width="400" height="250" />
</figure>

Использование `<figcaption>` за пределами изображений

<figure> предназначен для любого самостоятельного блока, к которому может потребоваться подпись — он не ограничен изображениями.

Подпись к листингу кода

Оберните блок <pre> / <code>, чтобы листинг и его метка были связаны вместе:

<figure>
  <figcaption>Listing 1 – A minimal "Hello, world" in JavaScript.</figcaption>
  <pre><code>console.log("Hello, world!");</code></pre>
</figure>

Подпись к таблице

<figure>
  <figcaption>Table 1 – HTTP status codes used by the API.</figcaption>
  <table>
    <tr><th>Code</th><th>Meaning</th></tr>
    <tr><td>200</td><td>OK</td></tr>
    <tr><td>404</td><td>Not Found</td></tr>
  </table>
</figure>

Примечание: у элемента <table> есть собственный встроенный элемент подписи — <caption>, который является более традиционным выбором для отдельной таблицы данных. Используйте <figure>/<figcaption>, когда таблица — одна из нескольких подписанных иллюстраций в документе или когда нужна нумерованная метка вида «Таблица 1», воспринимаемая как рисунок.

Подпись к цитате

<figure>
  <blockquote>
    <p>The best way to predict the future is to invent it.</p>
  </blockquote>
  <figcaption>— Alan Kay</figcaption>
</figure>

Подробнее о цитировании внешних источников см. тег <blockquote>.

Доступность: `alt` — это не `<figcaption>`

Легко перепутать атрибут alt изображения с <figcaption>, однако они выполняют разные функции и не должны дублировать друг друга:

alt — это текстовая альтернатива изображения. Она заменяет изображение, когда его невозможно увидеть (сломанная ссылка, медленное соединение или пользователь, воспринимающий информацию не визуально). Она описывает что изображено. Программа чтения с экрана зачитывает её вместо картинки.
<figcaption> — это подпись, дополнительная информация о рисунке, которую также видит зрячий пользователь. Она нередко добавляет контекст, который сам рисунок не передаёт («Рис.1 – Продажи выросли на 20% год к году»).

Оба атрибута можно применять к одному рисунку одновременно:

<figure>
  <img src="chart.png" alt="Bar chart of quarterly sales rising each quarter" />
  <figcaption>Fig.2 – Quarterly sales, 2025.</figcaption>
</figure>

Здесь alt описывает визуальное содержание («столбчатая диаграмма с ростом продаж по кварталам»), чтобы пользователи, не воспринимающие визуальный контент, получили данные, а <figcaption> добавляет метку, которую видят все. Оставляйте alt непустым и информативным, даже если присутствует подпись.

Атрибуты

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

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

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

figcaption {
  font-style: italic;
  color: gray; /* muted text so the caption reads as secondary */
  text-align: center;
  margin-top: 5px;
}

Полный рабочий пример со стилизованной подписью и тонкой рамкой вокруг рисунка:

<!DOCTYPE html>
<html>
  <head>
    <title>Styled figcaption</title>
    <style>
      figure {
        border: 1px solid lightgray;
        padding: 10px;
        display: inline-block;
        text-align: center;
      }
      figcaption {
        font-style: italic;
        color: gray;
        margin-top: 5px;
      }
    </style>
  </head>
  <body>
    <figure>
      <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A cute baby" width="250" height="200" />
      <figcaption>Fig.1 – Cute baby</figcaption>
    </figure>
  </body>
</html>

Практика

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

Программно связывать подпись с элементом <figure>Добавлять подписи только к изображениям, но не к другому содержимомуСоздавать заголовок раздела или страницыСоздавать маркированные списки

Зачем использовать <figcaption> вместо <p>?