figure и figcaption

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

Зачем нужно

Использование <figure> вместо голого <img> или <div> даёт семантическое значение: браузер и screen reader понимают, что это самодостаточный блок, который может быть вынесен из основного текста (как иллюстрация в книге). <figcaption> автоматически ассоциируется с содержимым <figure> без дополнительных ARIA-атрибутов.

Где используется

  • Иллюстрации к статьям и документации
  • Скриншоты и схемы в технических материалах
  • Блоки кода с подписью (листинги)
  • Цитаты с указанием источника
  • Таблицы с заголовком

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

Изображение с подписью

<figure>
  <img src="css-grid.png"
       alt="Схема CSS Grid: явные и неявные треки">
  <figcaption>
    Рис. 1 — Явные треки заданы через grid-template, неявные создаются автоматически.
  </figcaption>
</figure>

Блок кода с подписью

<figure>
  <figcaption>Листинг 1 — Минимальный HTTP-сервер на Node.js</figcaption>
  <pre><code>
const http = require('http');
http.createServer((req, res) => {
  res.end('Hello World');
}).listen(3000);
  </code></pre>
</figure>

Цитата с источником

<figure>
  <blockquote>
    <p>Любая программа, если она достаточно большая, содержит реализацию половины Common Lisp.</p>
  </blockquote>
  <figcaption>— Закон Гринспана, десятое правило</figcaption>
</figure>

SVG с подписью

<figure aria-labelledby="fig-caption">
  <svg role="img" aria-labelledby="svg-title">
    <title id="svg-title">Круговая диаграмма продаж</title>
    <!-- SVG content -->
  </svg>
  <figcaption id="fig-caption">Распределение продаж по категориям, Q1 2026</figcaption>
</figure>

<figcaption> — положение

<figcaption> может быть первым или последним дочерним элементом <figure>:

<!-- Подпись снизу (чаще) -->
<figure>
  <img src="photo.jpg" alt="...">
  <figcaption>Подпись снизу</figcaption>
</figure>

<!-- Подпись сверху -->
<figure>
  <figcaption>Подпись сверху</figcaption>
  <img src="photo.jpg" alt="...">
</figure>

Частые ошибки

Ошибка Почему плохо Как правильно
<div> вместо <figure> Нет семантики, нет связи с подписью Используй <figure> для самодостаточного контента
<figcaption> не внутри <figure> Нарушение структуры DOM <figcaption> — прямой дочерний элемент <figure>
Несколько <figcaption> в одном <figure> Невалидный HTML Не более одного <figcaption>
Дублирование alt и figcaption Screen reader повторяет одно и то же Если есть <figcaption>, alt можно сократить

Связанные темы

Ресурсы