Тег figcaption в HTML - подробное руководство с примерами

Введение

Тег figcaption в HTML помогает подписывать изображения, диаграммы, фрагменты кода и другие иллюстрации так, чтобы подпись была понятна не только визуально, но и на уровне структуры документа. Это важная часть семантической верстки и доступности интерфейсов.

Вы можете просто написать текст под картинкой и визуально это будет похоже на подпись. Но браузер и вспомогательные технологии (например, экранные дикторы) не поймут, что это именно подпись к конкретной иллюстрации. Тег figcaption как раз решает эту задачу.

Смотрите, я покажу вам, как это работает, на практике, а потом мы разберем все детали: синтаксис, типичные варианты использования, сочетание с CSS и нюансы для доступности.

Что такое figcaption и зачем он нужен

Семантическая роль тега figcaption

Тег figcaption — это специальный элемент HTML, который служит подписью для содержимого тега figure. Он связывает иллюстрацию и ее текстовое описание на уровне структуры документа.

Основные задачи figcaption:

• описать, что находится в figure;
• добавить пояснение, источник, подпись или краткое резюме;
• улучшить доступность контента для экранных дикторов;
• помочь поисковым системам и другим автоматическим системам корректно интерпретировать иллюстрацию.

Важно понимать разницу:

• alt у img — это альтернативный текст для случая, когда картинка недоступна или для чтения экранным диктором;
• figcaption — это подпись/пояснение для пользователя (включая зрячих), часто более подробная и контекстная.

Обычно figcaption используют вместе с figure, но сам по себе он не работает как подпись, если не вложен внутрь figure.

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

Давайте разберемся на примере базовой конструкции:

<figure>
  <!-- Иллюстрация, к которой будет относиться подпись -->
  <img src="mountains.jpg" alt="Горный пейзаж на закате" />
  <!-- Подпись к иллюстрации -->
  <figcaption>Вид на горы в Норвегии на закате</figcaption>
</figure>

Комментарии в примере показывают, что:

• figure объединяет картинку и подпись в единый смысловой блок;
• figcaption явно указывает, что этот текст — подпись к содержимому figure.

Как видите, такой код дает браузеру и вспомогательным технологиям четкую структуру: есть иллюстрация и есть описание, которое к ней относится.

Синтаксис и правила использования figcaption

Обязательное использование вместе с figure

Тег figcaption должен находиться внутри тега figure. Вне figure он не имеет смысла и считается неверным использованием с точки зрения семантики.

Правильно:

<figure>
  <!-- Содержимое: картинка, диаграмма, код, табличка и т.д. -->
  <img src="chart.png" alt="Диаграмма продаж по месяцам" />
  <!-- Подпись к содержимому figure -->
  <figcaption>Продажи по месяцам за 2024 год</figcaption>
</figure>

Неправильно:

<!-- Неверно - figcaption находится вне figure -->
<img src="chart.png" alt="Диаграмма продаж по месяцам" />
<figcaption>Продажи по месяцам за 2024 год</figcaption>

Браузер может это отобразить визуально, но семантическая структура будет нарушена.

Положение figcaption внутри figure

figcaption может находиться:

• в начале тега figure;
• в конце тега figure.

Разработчики чаще ставят подпись внизу, потому что это привычно визуально. Но HTML не ограничивает вас.

Давайте посмотрим примеры.

Подпись после иллюстрации (классический вариант)

<figure>
  <!-- Сначала иллюстрация -->
  <img src="forest.jpg" alt="Тихий лесной пейзаж" />
  <!-- Потом подпись -->
  <figcaption>Лес ранним утром после дождя</figcaption>
</figure>

Подпись перед иллюстрацией

<figure>
  <!-- Сначала подпись -->
  <figcaption>Схема архитектуры микросервиса</figcaption>
  <!-- Потом иллюстрация -->
  <img src="architecture.png" alt="Схема архитектуры микросервиса" />
</figure>

Семантически оба варианта корректны. Визуальный порядок можно при необходимости изменить с помощью CSS (flex, grid и т.д.).

Допустимое содержимое внутри figcaption

Внутри figcaption можно использовать почти любые фразы и элементы строчного/блочного уровня, которые логично относятся к подписи:

• обычный текст;
• ссылки;
• теги strong, em, span;
• небольшие списки;
• инлайн-иконки;
• элементы для указания источника.

Пример с более сложной подписью:

<figure>
  <!-- Иллюстрация -->
  <img src="city-night.jpg" alt="Город ночью с огнями небоскребов" />
  <!-- Составная подпись -->
  <figcaption>
    Ночной мегаполис 
    <!-- Выделение названия города -->
    <strong>Токио</strong> 
    <!-- Источник изображения -->
    Фото 
    <a href="https://example.com/author">Иван Иванов</a>
  </figcaption>
</figure>

Комментарии помогают увидеть, какие элементы можно использовать, чтобы сделать подпись не просто текстом, а полноценным информативным блоком.

Связь figcaption и alt у изображений

Зачем нужны оба — и alt, и figcaption

Иногда возникает вопрос: если есть figcaption, нужно ли прописывать alt у img? Да, нужно.

Разделим роли:

• alt — короткое описание самой картинки. Используется, когда изображение не отображается, а также читается экранными дикторами вместо изображения;
• figcaption — подпись для всех пользователей. Часто содержит больше контекста, может быть длиннее и детальнее.

Смотрите, я покажу вам пример, где у нас и alt, и figcaption выполняют свои роли:

<figure>
  <!-- Альтернативный текст описывает, что на картинке -->
  <img src="team.jpg" alt="Команда разработчиков у доски с диаграммой" />
  <!-- Подпись добавляет контекст и служит общим описанием блока -->
  <figcaption>Команда проекта обсуждает архитектуру новой системы</figcaption>
</figure>

Если картинка не загрузится, пользователь все равно:

• увидит подпись фигуры (figcaption);
• услышит или увидит alt вместо изображения.

Когда alt может быть пустым при использовании figcaption

Иногда изображение носит чисто декоративный характер, а вся суть описана в figcaption. В таком случае бывает уместно сделать alt пустым, чтобы экранные дикторы не дублировали информацию.

Пример:

<figure>
  <!-- Декоративное изображение, описание полностью в подписи -->
  <img src="quote-bg.png" alt="" />
  <figcaption>
    Цитата дня — Не бойтесь учиться новому каждый день
  </figcaption>
</figure>

Обратите внимание:

• alt пустой — alt="";
• figcaption содержит фактический текст, который важен для понимания.

Такой прием полезен, когда:

• изображение не добавляет новой информации;
• вы хотите избежать дублирования текста для пользователей экранных дикторов.

Но если картинка несет важный смысл (фото продукта, схема, диаграмма), alt лучше заполнять осмысленно.

Использование figcaption не только с изображениями

Подписи к диаграммам и графикам

figcaption отлично подходит для подписей к диаграммам и графикам, даже если они встроены как SVG или canvas.

<figure>
  <!-- SVG-график -->
  <svg width="400" height="200" aria-labelledby="sales-title">
    <!-- Заголовок для доступности -->
    <title id="sales-title">Рост продаж по кварталам</title>
    <!-- Здесь могла бы быть разметка графика -->
    <!-- ... -->
  </svg>
  <!-- Подпись к всей фигуре -->
  <figcaption>
    График роста продаж по кварталам за период 2021–2024 годов
  </figcaption>
</figure>

Комментарии отмечают, что:

• title внутри SVG помогает доступности самого SVG;
• figcaption описывает фигуру в целом.

Подписи к фрагментам кода

Вы можете использовать figure и figcaption для оформления блоков кода с пояснением.

<figure>
  <!-- Блок кода с подсветкой -->
  <pre><code>// Функция суммирования массива
function sum(arr) {
  // Используем метод reduce для подсчета суммы
  return arr.reduce((acc, value) => acc + value, 0);
}</code></pre>
  <!-- Подпись, поясняющая, что делает код -->
  <figcaption>
    Пример функции на JavaScript для суммирования значений массива
  </figcaption>
</figure>

Такой подход удобно использовать в документации: пользователю сразу видно и код, и пояснение.

Подписи к таблицам и другим медиа

Таблицы обычно подписывают через caption, но вы можете использовать figure + figcaption, если хотите явно выделить блок как иллюстрацию в тексте, особенно если таблица играет роль "рисунка".

<figure>
  <!-- Таблица с данными -->
  <table>
    <thead>
      <tr>
        <th>Год</th>
        <th>Продажи</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>2023</td>
        <td>1200</td>
      </tr>
      <tr>
        <td>2024</td>
        <td>1500</td>
      </tr>
    </tbody>
  </table>
  <!-- Подпись ко всей фигуре -->
  <figcaption>
    Сравнение продаж за 2023 и 2024 годы
  </figcaption>
</figure>

Здесь figcaption относится ко всей фигуре, а не только к таблице.

По аналогии можно подписывать:

• видео;
• аудиоплееры;
• интерактивные компоненты (карты, виджеты).

Доступность и figcaption

Как figcaption помогает доступности

Экранные дикторы и другие вспомогательные технологии воспринимают figure и figcaption как связанный блок: есть некий "рисунок", есть его подпись. Это помогает пользователям, которые не видят изображение, понять, для чего оно в тексте.

Для экранного диктора обычно:

• сначала озвучивается информация о наличии фигуры;
• затем — подпись из figcaption;
• и при необходимости — alt изображения или содержимое внутри figure.

Чтобы это работало корректно, стоит:

• использовать понятный и конкретный текст в figcaption;
• не дублировать дословно alt и figcaption, если есть возможность;
• не делать подпись слишком общей, если от иллюстрации зависит понимание текста.

Связка figure, figcaption и ARIA-атрибутов

Иногда требуется более тонко управлять доступностью, например, когда фигура сложная и содержит несколько элементов. Можно использовать aria-describedby, чтобы явно указать связь подписи и содержимого.

Покажу вам, как это реализовано на практике:

<figure>
  <!-- Контейнер с диаграммой, описываемый подписью -->
  <div role="img" aria-describedby="chart-caption">
    <!-- Здесь код диаграммы, например через canvas или библиотеку -->
    <!-- ... -->
  </div>
  <!-- Подпись, на которую ссылается aria-describedby -->
  <figcaption id="chart-caption">
    Диаграмма показывает распределение времени по задачам в течение рабочего дня
  </figcaption>
</figure>

Комментарии в коде подсказывают:

• role="img" и aria-describedby связывают фигуру и подпись;
• id у figcaption делает его доступным для ссылки.

Это полезно, когда внутри figure нет img, но есть визуальное представление (canvas, сложный div, кастомные компоненты).

Стилизация figcaption с помощью CSS

Базовая стилизация подписи

По умолчанию figcaption отображается как блочный элемент. Вы можете легко изменить его внешний вид через CSS: размер шрифта, цвет, выравнивание.

<style>
  figure {
    /* Центрируем фигуру и задаем отступы */
    margin: 1.5rem auto;
    text-align: center;
  }

  figure img {
    /* Делаем изображение адаптивным */
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  figcaption {
    /* Стилизуем подпись - уменьшаем шрифт и делаем ее более нейтральной */
    font-size: 0.9rem;
    color: #555;
    margin-top: 0.5rem;
  }
</style>

<figure>
  <img src="lake.jpg" alt="Озеро в горах" />
  <figcaption>Озеро в горах в осенний период</figcaption>
</figure>

Обратите внимание, как этот фрагмент кода решает задачу: подпись визуально отделена, но не привлекает больше внимания, чем сама картинка.

Выравнивание и оформление как "рисунок с подписью"

Часто нужно оформить подписи в стиле "Рисунок 1 — Описание". Это удобно для документаций и статей.

<style>
  .figure-with-number {
    /* Фигура с нумерацией */
    margin: 1.5rem 0;
  }

  .figure-with-number figcaption::before {
    /* Добавляем префикс Рисунок с помощью псевдоэлемента */
    content: "Рисунок " attr(data-number) " — ";
    font-weight: bold;
  }

  .figure-with-number figcaption {
    font-size: 0.95rem;
    color: #333;
  }
</style>

<figure class="figure-with-number">
  <img src="diagram.png" alt="Диаграмма процессов системы" />
  <!-- Храним номер рисунка в атрибуте data-number -->
  <figcaption data-number="1">
    Общая диаграмма процессов системы
  </figcaption>
</figure>

Комментарии показывают:

• нумерация задается через data-атрибут;
• текст "Рисунок N —" добавляется через CSS, а не дублируется руками.

Размещение подписи поверх изображения

Иногда нужно разместить подпись поверх картинки (например, затемненная плашка снизу). Здесь figcaption можно использовать как слой поверх изображения.

<style>
  .figure-overlay {
    position: relative;
    display: inline-block;
    margin: 0;
  }

  .figure-overlay img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  .figure-overlay figcaption {
    /* Располагаем подпись поверх изображения внизу */
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    /* Полупрозрачный фон для читаемости текста */
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 0.5rem;
    font-size: 0.9rem;
    box-sizing: border-box;
  }
</style>

<figure class="figure-overlay">
  <img src="city-skyline.jpg" alt="Панорама города ночью" />
  <figcaption>
    Панорама города ночью с подсветкой мостов
  </figcaption>
</figure>

Теперь вы увидите, как это выглядит в коде: подпись аккуратно накладывается поверх изображения, при этом остается семантически правильной подписью.

Локальная и глобальная семантика: когда использовать figcaption, а когда нет

Когда figcaption действительно нужен

Используйте figcaption, если:

• подпись помогает понять содержание иллюстрации;
• изображение или фигура важны для смысла текста;
• нужно явно связать пояснение с конкретной иллюстрацией;
• вы пишете статьи, документации, обучающие материалы, отчеты.

Примеры:

• диаграмма с подписью, поясняющей вывод из данных;
• фотография продукта с кратким описанием;
• фрагмент кода с комментарием, что именно он делает.

Когда figcaption можно не использовать

Иногда подпись не нужна:

• изображение чисто декоративное;
• подпись дублирует заголовок, который уже находится рядом;
• иллюстрация очевидна и не требует пояснений.

В таком случае:

• используйте только figure + img (если хотите сохраниться семантическую группу без подписи);
• или даже просто img без figure, если grouping не нужен.

Пример без подписи:

<figure>
  <!-- Логотип компании, понятный сам по себе -->
  <img src="logo.svg" alt="Логотип компании Example" />
</figure>

Здесь figcaption не добавляет новой полезной информации, поэтому его можно опустить.

Практические паттерны использования figcaption

Паттерн "Галерея изображений с подписями"

Часто вам нужно сделать галерею картинок, у каждой из которых есть подпись. figure и figcaption идеально для этого подходят.

<style>
  .gallery {
    display: grid;
    /* 3 колонки на больших экранах */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
  }

  .gallery figure {
    margin: 0;
  }

  .gallery img {
    display: block;
    width: 100%;
    height: auto;
  }

  .gallery figcaption {
    font-size: 0.85rem;
    color: #444;
    margin-top: 0.35rem;
  }
</style>

<div class="gallery">
  <figure>
    <img src="photo1.jpg" alt="Дом у озера зимой" />
    <figcaption>Дом у озера зимой</figcaption>
  </figure>
  <figure>
    <img src="photo2.jpg" alt="Сосновый лес в тумане" />
    <figcaption>Сосновый лес в тумане</figcaption>
  </figure>
  <figure>
    <img src="photo3.jpg" alt="Горная тропа на рассвете" />
    <figcaption>Горная тропа на рассвете</figcaption>
  </figure>
</div>

Здесь я размещаю пример, чтобы вам было проще понять, как соединить разметку и стилизацию для реальной галереи.

Паттерн "Рисунок, на который ссылается текст"

В технических документах часто встречаются ссылки вида "см. рисунок 2". Вы можете использовать figcaption с нумерацией и id у figure.

<style>
  .doc-figure {
    margin: 1.5rem 0;
  }

  .doc-figure figcaption::before {
    content: "Рисунок " attr(data-num) " — ";
    font-weight: bold;
  }
</style>

<p>
  На схеме ниже показана архитектура сервиса авторизации
  (см. рисунок 1).
</p>

<figure class="doc-figure" id="fig-auth-architecture">
  <img src="auth-architecture.png" alt="Архитектура сервиса авторизации" />
  <figcaption data-num="1">
    Архитектура сервиса авторизации в распределенной системе
  </figcaption>
</figure>

Здесь текст "см. рисунок 1" относится к конкретной figure с понятной подписью.

Паттерн "Мультимедийный блок с подписью"

Видео или аудио также удобно оформлять через figure + figcaption, чтобы иметь единый блок с подписью.

<figure>
  <!-- Видеоплеер с controls -->
  <video controls width="640">
    <!-- Основной источник видео -->
    <source src="demo.mp4" type="video/mp4" />
    Ваш браузер не поддерживает видео
  </video>
  <!-- Подпись к видеоролику -->
  <figcaption>
    Демонстрация работы новой версии пользовательского интерфейса
  </figcaption>
</figure>

Как видите, этот код выполняет задачу семантического объединения: и видео, и подпись находятся в одной фигуре.

Типичные ошибки при использовании figcaption

Ошибка 1 — использование figcaption без figure

<!-- Ошибочный пример -->
<img src="photo.jpg" alt="Фото" />
<figcaption>Подпись к фото</figcaption>

Почему это проблема:

• нарушается структура документа;
• подпись не связана семантически с картинкой;
• ассистивные технологии не понимают, что это подпись.

Как исправить:

<figure>
  <img src="photo.jpg" alt="Фото" />
  <figcaption>Подпись к фото</figcaption>
</figure>

Ошибка 2 — несколько figcaption внутри одного figure

Спецификация предполагает, что у figure может быть не более одного figcaption. Иногда разработчики пытаются сделать несколько подписей:

<!-- Неправильно -->
<figure>
  <img src="product.jpg" alt="Телефон" />
  <figcaption>Телефон X100</figcaption>
  <figcaption>Цена 29990 ₽</figcaption>
</figure>

Как это исправить:

• объедините текст в один figcaption;
• при необходимости используйте span, div внутри него.

<figure>
  <img src="product.jpg" alt="Телефон" />
  <figcaption>
    <span>Телефон X100</span>
    <span>Цена 29 990 ₽</span>
  </figcaption>
</figure>

Комментарии подсказывают, что внутри одного figcaption вы можете разместить несколько элементов.

Ошибка 3 — слишком длинные и "водянистые" подписи

Длинный текст в подписи усложняет восприятие. figcaption — это все-таки подпись, а не полноценный параграф.

Не лучший вариант:

<figure>
  <img src="diagram-long.png" alt="Сложная схема" />
  <figcaption>
    На этой диаграмме вы можете увидеть множество разных элементов,
    которые вместе иллюстрируют общую структуру проекта, включая
    микросервисы, базы данных, очереди сообщений и другие компоненты,
    которые все вместе работают для обеспечения общей функциональности
    системы.
  </figcaption>
</figure>

Лучше:

<figure>
  <img src="diagram-long.png" alt="Схема микросервисной архитектуры" />
  <figcaption>
    Схема микросервисной архитектуры проекта с основными компонентами
    и связями между ними
  </figcaption>
</figure>

Детали можно вынести в текст статьи или отдельный раздел, а подпись оставить емкой.

Ошибка 4 — дублирование alt и figcaption слово в слово

Нет строгого запрета, но для пользователей экранных дикторов это может быть раздражающим: один и тот же текст повторяется дважды подряд.

Неудачный пример:

<figure>
  <img src="bridge.jpg" alt="Мост через реку в тумане" />
  <figcaption>Мост через реку в тумане</figcaption>
</figure>

Лучше слегка развести по смыслу:

<figure>
  <img src="bridge.jpg" alt="Мост через реку в тумане" />
  <figcaption>
    Мост через реку в тумане ранним утром
  </figcaption>
</figure>

Или:

<figure>
  <img src="bridge.jpg" alt="Мост через реку в тумане" />
  <figcaption>
    Утренний туман над рекой и пешеходным мостом
  </figcaption>
</figure>

Тогда пользователь получит чуть больше информации, а не прямое дублирование.

Заключение

Тег figcaption — простой на вид, но важный инструмент для семантической верстки и доступности. Он позволяет четко обозначить подписи к изображениям, диаграммам, фрагментам кода, видео и другим иллюстрациям, делая структуру документа понятной как для людей, так и для машин.

Ключевые моменты, которые стоит помнить:

• figcaption всегда используется внутри figure;
• у одного figure должен быть не более одного figcaption;
• figcaption дополняет, а не заменяет alt у изображений;
• внутри figcaption можно размещать сложные подписи, ссылки, выделения;
• с помощью CSS вы можете оформить подписи так, как нужно интерфейсу, не теряя семантики;
• правильное использование figcaption повышает доступность и улучшает восприятие контента.

Если вы оформляете статьи, документацию или просто хотите сделать интерфейс более структурированным и понятным, стоит приучить себя использовать figure и figcaption там, где нужны подписи к иллюстрациям.

Частозадаваемые технические вопросы по теме и ответы

Как сделать, чтобы figcaption не занимал всю ширину figure?

По умолчанию figcaption — блочный элемент и растягивается на ширину родителя. Чтобы этого избежать, можно:

<style>
  figure {
    text-align: center;
  }

  figcaption {
    display: inline-block; /* сужаем до ширины содержимого */
    text-align: left;      /* выравниваем текст внутри подписи */
  }
</style>

Так подпись займет только нужную ширину, а не всю строку.

Как скрыть figcaption визуально, но оставить его для экранных дикторов?

Используйте "visually hidden" класс:

<style>
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
  }
</style>

<figure>
  <img src="chart.png" alt="" />
  <figcaption class="visually-hidden">
    Описание диаграммы для пользователей экранных дикторов
  </figcaption>
</figure>

Подпись будет доступна для ассистивных технологий, но не видна на экране.

Можно ли сделать кликабельной только часть figcaption?

Да, просто оберните кликабельную часть в a:

<figcaption>
  Источник данных —
  <a href="https://example.com/report">отчет компании Example</a>
</figcaption>

При этом остальная часть подписи останется некликабельной.

Как сделать общую подпись для нескольких изображений?

Объедините их в один figure:

<figure>
  <img src="step1.png" alt="Шаг 1" />
  <img src="step2.png" alt="Шаг 2" />
  <img src="step3.png" alt="Шаг 3" />
  <figcaption>
    Три шага настройки системы слева направо
  </figcaption>
</figure>

Так figcaption будет относиться сразу ко всем трем изображениям.

Как добавить к figcaption нумерацию автоматически с помощью JavaScript?

Можно пронумеровать все фигуры на странице:

<script>
// Находим все элементы figcaption на странице
document.querySelectorAll("figure > figcaption").forEach((caption, index) => {
  // Префиксируем текст подписи номером
  caption.textContent = `Рисунок ${index + 1} — ${caption.textContent}`;
});
</script>

Так каждая подпись получит номер "Рисунок N —" без ручного редактирования.