Тег <figcaption>

Описание

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

Подпись к изображению:
<figure> <img src="landscape.jpg" alt="Горный пейзаж"> <figcaption>Фото: Горный хребет на рассвете</figcaption> </figure>
Подпись к блоку кода:
<figure> <pre><code> function greet() { console.log("Hello World!"); } </code></pre> <figcaption>Пример 1: Функция вывода приветствия</figcaption> </figure>

Ключевые особенности:

  • Должен находиться внутри <figure>
  • Может располагаться до или после контента
  • Поддерживает все фразовые элементы (ссылки, выделения и т.д.)
  • По умолчанию не имеет специального оформления
  • Важен для доступности и SEO

Рекомендации по использованию:

  • Делайте подписи краткими, но информативными
  • Для изображений дублируйте важную информацию из alt
  • Используйте последовательную нумерацию в научных/технических документах
  • Размещайте рядом с соответствующим контентом

Практические применения:

  • Описание фотографий и иллюстраций
  • Пояснения к графикам и диаграммам
  • Аннотации к примерам кода
  • Подписи к видео- и аудио-контенту

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

Атрибуты

accesskey Горячая клавиша для активации элемента
class CSS-классы для стилизации элемента
contenteditable Разрешает редактирование содержимого
data-* Пользовательские данные элемента
dir Направление текста (ltr/rtl)
hidden Скрывает элемент
id Уникальный идентификатор элемента
lang Язык содержимого элемента
spellcheck Разрешает проверку орфографии
style Инлайновые CSS-стили
tabindex Порядок перехода по Tab
title Всплывающая подсказка для элемента
translate Разрешает перевод содержимого

Поддержка браузерами
9.0 8.0 9.2 4.0 5.0