<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>
, добавив им классы или идентификаторы для стилизации и форматирования.
Актуальность
Тег <figcaption>
является актуальным, можете использовать его в веб-разработке.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023