<figcaption>

25 января 2023

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

Синтаксис тега <figcaption>

<figure>
  <img src="image.jpg" alt="Image">
  <figcaption>Описание изображения</figcaption>
</figure>

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

Тег является частью спецификации HTML Living Standard.

Семантический или нет

Тег <figcaption> считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.

Примеры использования

Добавление подписи к изображению:

<figure>
  <img src="image.jpg" alt="Image">
  <figcaption>Описание изображения</figcaption>
</figure>

Добавление подписи к видео:

<figure>
  <video src="video.mp4" controls></video>
  <figcaption>Описание видео</figcaption>
</figure>

Добавление подписи к таблице:

<figure>
  <table>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </table>
  <figcaption>Описание таблицы</figcaption>
</figure>

Добавление подписи к музыкальному треку:

<figure>
  <audio src="music.mp3" controls></audio>
  <figcaption>Название трека и исполнитель</figcaption>
</figure>

Добавление подписи к блоку цитат:

<figure>
  <blockquote>
    "Цитата"
  </blockquote>
  <figcaption>Автор цитаты</figcaption>
</figure>

Добавление подписи к графику:

<figure>
  <svg>...</svg>
  <figcaption>Описание графика</figcaption>
</figure>

Добавление подписи к коду:

<figure>
  <pre><code>Код</code></pre>
  <figcaption>Описание кода</figcaption>
</figure>

Для чего использовать <figcaption>

Добавить подпись контенту, который находится внутри тега <figure>.
Добавить контекстуальную информацию, такую как автор, дата, место и другие сведения, которые могут быть полезны для пользователей.
Улучшить доступность и понимание содержимого страницы для пользователей с ограниченными возможностями.
Улучшить SEO-оптимизацию страницы.

Атрибуты тега <figcaption>

align — выравнивание подписи относительно элемента <figure>. Атрибут устаревший.

Глобальные атрибуты

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

Ограничения

Тег <figcaption> может использоваться только внутри элемента <figure>.

Нюансы

Валидный HTML требует, чтобы тег <figcaption> находился после элемента <img> или других медиа-элементов внутри <figure>. Однако это необязательное правило, и подпись может располагаться перед медиа-элементом или даже внутри него.

Поддержка браузерами

Тег <figcaption> поддерживается всеми современными браузерами. Актуальная информация — на сaniuse.

Альтернативные теги

Альтернативных тегов для тега <figcaption> не существует.

Чем заменить тег

Для добавления подписи к медиа-элементу следует использовать тег <figure> вместе с элементом <figcaption>. Если подпись нужна для других элементов, можете использовать <p> или <div>, добавив им классы или идентификаторы для стилизации и форматирования.