Тег figure в HTML - как правильно оформлять иллюстрации и подписи

Введение

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

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

Вам важно понимать, как и когда использовать figure, чем он отличается от просто div с картинкой, как с ним работает доступность и как его правильно вкладывать в разметку. Давайте разбираться по шагам.

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

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

Тег figure — блочный семантический контейнер, который обозначает иллюстративный или поясняющий блок контента, связанный с основным текстом, но логически самостоятельный.

Проще говоря, вы используете figure, когда:

• у вас есть иллюстрация или блок контента, который:
  • относится к основному содержанию страницы
  • но может быть понят и вне контекста текста
• вы хотите добавить подпись к этой иллюстрации с помощью figcaption
• вам важно сохранить корректную семантику и доступность

Типичные примеры использования:

• изображение с подписью
• фрагмент кода с заголовком
• диаграмма или график с пояснением
• таблица-иллюстрация с комментариями
• фотография с указанием автора и описанием

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

Тег figure не обязателен для каждого изображения. Есть случаи, когда он только усложнит структуру:

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

В таких ситуациях гораздо логичнее использовать просто img (или вообще фоновое изображение через CSS), без figure.

Базовый синтаксис тега figure

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

Смотрите, я покажу вам, как выглядит самый простой и при этом правильный вариант использования figure:

<figure>
  <!-- Основное изображение -->
  <img src="cat.jpg" alt="Серая кошка лежит на клавиатуре ноутбука">
  
  <!-- Подпись к изображению -->
  <figcaption>Кошка помогает писать код</figcaption>
</figure>

Комментариями здесь отмечено главное:

• внутри figure находится само содержимое (img)
• figcaption — подпись, описывающая или дополняющая фигуру
• alt у изображения все еще обязателен для доступности

Порядок элементов внутри figure

Формально figcaption можно располагать как до содержимого, так и после него. Оба варианта допустимы:

<!-- Подпись перед изображением -->
<figure>
  <figcaption>Схема архитектуры приложения</figcaption>
  <img src="diagram.png" alt="Блок-схема архитектуры приложения">
</figure>

<!-- Подпись после изображения -->
<figure>
  <img src="diagram.png" alt="Блок-схема архитектуры приложения">
  <figcaption>Схема архитектуры приложения</figcaption>
</figure>

Браузер и вспомогательные технологии понимают оба варианта одинаково. Вы выбираете порядок исходя из дизайна и привычек пользователей. Чаще подпись размещают под картинкой.

Обязателен ли figcaption

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

<figure>
  <img src="landscape.jpg" alt="Горное озеро на закате">
</figure>

Но тогда смысла в figure обычно меньше. Чаще всего, если вам не нужна подпись и нет отдельного смыслового блока, достаточно просто img.

Практический ориентир:

• есть подпись или дополнительное описание — используйте figure + figcaption
• нет подписи, изображение встроено в текст — используйте просто img

Где и как можно использовать тег figure

Встраивание в текст статьи

Самый типичный сценарий — иллюстрация в потоке текста статьи. Давайте разберемся на примерной структуре:

<article>
  <h2>Настройка окружения</h2>
  <p>Сначала установите необходимое программное обеспечение...</p>

  <figure>
    <img src="setup-screen.png" alt="Скриншот мастера установки">
    <figcaption>Окно мастера установки на шаге выбора компонентов</figcaption>
  </figure>

  <p>После выбора компонентов нажмите Далее и дождитесь окончания установки...</p>
</article>

Как видите, figure стоит между абзацами и не ломает поток текста, а лишь дополняет его.

Вне основного потока текста

Особенность figure — его содержимое можно перемещать относительно основного потока (например, с помощью CSS, колонок, боковых блоков), при этом семантическая связь сохранится. Браузер и вспомогательные технологии по-прежнему будут понимать, что это фигура с подписью.

Например, можно вынести figure в боковую колонку:

<aside>
  <figure>
    <img src="author.jpg" alt="Портрет автора статьи">
    <figcaption>Автор статьи - разработчик фронтенда</figcaption>
  </figure>
</aside>

Семантически все корректно — это по-прежнему самодостаточный иллюстративный блок.

Несколько элементов внутри одного figure

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

<figure>
  <!-- Две картинки, которые вместе образуют один пример -->
  <img src="before.png" alt="Интерфейс до редизайна">
  <img src="after.png" alt="Интерфейс после редизайна">

  <figcaption>
    Сравнение интерфейса до и после редизайна
  </figcaption>
</figure>

Здесь пара изображений составляют одну фигуру. Подпись относится сразу к обоим.

Вы можете комбинировать разные элементы:

<figure>
  <!-- Схема архитектуры -->
  <img src="arch-diagram.svg" alt="Многоуровневая архитектура приложения">

  <!-- Небольшое текстовое пояснение -->
  <p><!-- Краткое описание для пользователей -->
    На схеме показаны три уровня архитектуры - клиент, сервер и база данных.
  </p>

  <!-- Подпись к фигуре (может быть лаконичной) -->
  <figcaption>Архитектура приложения</figcaption>
</figure>

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

Тег figure и доступность (a11y)

Роль alt у изображений внутри figure

Даже если вы используете figure, правило для alt никуда не девается:

• alt обязателен для содержательных изображений
• alt можно опустить (alt="") только для чисто декоративных картинок

В сочетании с figcaption есть нюанс. Иногда подпись полностью дублирует смысл alt. Тогда вы можете сделать alt более кратким, а подробности вынести в figcaption.

Например:

<figure>
  <img src="chart.png" alt="График роста">
  <figcaption>
    График роста количества активных пользователей сервиса за последний год
    показывает плавный рост с ускорением в последние три месяца.
  </figcaption>
</figure>

Здесь:

• alt передает краткий смысл
• figcaption дает расширенное пояснение

Когда можно делать alt пустым

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

<figure>
  <!-- alt пустой, так как вся суть передана в подписи -->
  <img src="logo.svg" alt="">
  <figcaption>
    Логотип компании на 2025 год - стилизованная буква L в синем круге
  </figcaption>
</figure>

Но лучше применять этот прием осознанно и не слишком часто. В большинстве случаев alt и figcaption дополняют друг друга.

Как figcaption читается экранными читателями

figcaption связывается с figure как подпись. Экранные читатели обычно:

• объявляют, что это фигура
• читают основной контент внутри (например, alt изображения)
• затем читают подпись

Это одна из причин, почему полезно использовать именно figcaption, а не просто p под картинкой. Семантика здесь очень важна.

Локализация и многоязычность

Если вы делаете многоязычный сайт, не забывайте:

• alt и figcaption — часть локализуемого контента
• их текст должен быть на том же языке, что и остальная часть страницы

Для экранных читателей и поисковых систем это важно так же, как и перевод основного текста.

Особенности тега figcaption

Где можно размещать figcaption

У figcaption есть одно жесткое правило: он должен быть первым или последним дочерним элементом внутри figure.

Корректно:

<figure>
  <figcaption>Подпись перед</figcaption>
  <img src="img.png" alt="Описание">
</figure>

<figure>
  <img src="img.png" alt="Описание">
  <figcaption>Подпись после</figcaption>
</figure>

Некорректно (так делать не стоит):

<figure>
  <p>Какой-то текст</p>
  <figcaption>Подпись</figcaption>
  <img src="img.png" alt="Описание">
</figure>

В этом случае HTML будет считаться некорректным. Браузеры, скорее всего, "простят" такую разметку, но на это лучше не рассчитывать.

Может ли figcaption быть пустым

Формально да, но практической пользы в этом почти нет. Если подпись вам не нужна, просто не добавляйте figcaption.

Можно ли иметь несколько figcaption в одном figure

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

• валидаторы будут ругаться
• вспомогательные технологии могут обрабатывать разметку некорректно

Если вам нужно несколько строк подписи, объединяйте их внутри одного figcaption:

<figure>
  <img src="photo.jpg" alt="Фото команды разработки">
  <figcaption>
    <strong>Команда разработки</strong><br>
    Слева направо - Анна, Игорь, Мария, Алексей.
  </figcaption>
</figure>

Примеры использования тега figure в разных задачах

Пример 1. Фотография с подписью и указанием источника

Давайте посмотрим, как оформить фотографию с подписью и ссылкой на источник:

<figure>
  <img src="city.jpg" alt="Ночной город с подсветкой небоскребов">
  <figcaption>
    Ночной вид на центр города.
    <!-- Ссылка на источник фотографии -->
    Фото - 
    <a href="https://example.com/author" target="_blank" rel="noopener">
      Иван Петров
    </a>
  </figcaption>
</figure>

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

• подпись может содержать текст и ссылки
• вы спокойно комбинируете обычный HTML внутри figcaption

Пример 2. Блок кода с подписью

figure отлично подходит для примеров кода в технических статьях. Покажу вам, как это выглядит:

<figure>
  <!-- Блок с кодом -->
  <pre><code>// Функция сложения двух чисел
function add(a, b) {
  // Возвращаем сумму аргументов
  return a + b;
}</code></pre>

  <!-- Подпись к примеру кода -->
  <figcaption>Функция add для сложения двух чисел на JavaScript</figcaption>
</figure>

Здесь:

• figure группирует код и подпись
• пользователю легче понимать, к какому фрагменту относится текст под ним

Пример 3. Диаграмма или график

Для графиков figure особенно полезен, так как подпись часто содержит важное объяснение:

<figure>
  <!-- Изображение диаграммы -->
  <img src="sales-chart.png" 
       alt="Столбчатая диаграмма продаж по кварталам - рост от Q1 к Q4">

  <!-- Подпись с пояснением вывода -->
  <figcaption>
    Динамика продаж за 2024 год - видно плавное увеличение выручки
    от первого к четвертому кварталу.
  </figcaption>
</figure>

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

Пример 4. Сравнение до и после

Давайте разберемся на примере "до и после" редизайна:

<figure class="comparison">
  <!-- Блок с двумя изображениями -->
  <div class="comparison__images">
    <img src="old-design.png" alt="Старый дизайн сайта">
    <img src="new-design.png" alt="Новый дизайн сайта">
  </div>

  <!-- Подпись с пояснением -->
  <figcaption>
    Сравнение старого и нового дизайна главной страницы.
    Основные изменения - упрощенная навигация и более крупный текст.
  </figcaption>
</figure>

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

• figure оборачивает и изображения, и подпись
• внутри вы можете использовать div для верстки

Пример 5. Цитата как фигура

Хотя для цитат есть отдельный тег blockquote, иногда вы хотите оформить цитату как иллюстративный блок с подписью-атрибуцией:

<figure class="quote">
  <!-- Основной текст цитаты -->
  <blockquote>
    Мы не пишем код для компьютеров - мы пишем код для людей,
    которые будут его сопровождать.
  </blockquote>

  <!-- Подпись с указанием автора -->
  <figcaption>
    — Роберт Мартин, автор книги Чистый код
  </figcaption>
</figure>

Так вы получаете красивую, структурированную цитату с авторством.

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

Базовое оформление картинок с подписями

Давайте посмотрим, как можно минимально оформить figure и figcaption:

<style>
  figure {
    /* Отступы вокруг фигуры */
    margin: 1.5rem 0;
    /* Выравнивание по центру */
    text-align: center;
  }

  figcaption {
    /* Отступ сверху от картинки */
    margin-top: 0.5rem;
    /* Серый цвет текста подписи */
    color: #666;
    /* Меньший размер шрифта для подписи */
    font-size: 0.9rem;
  }
</style>

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

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

Выравнивание figure относительно текста

Вы можете выравнивать фигуру влево или вправо и "обтекать" ее текстом:

<style>
  .figure-right {
    /* Обтекание фигуры текстом слева */
    float: right;
    /* Отступы вокруг фигуры */
    margin: 0 0 1rem 1rem;
    /* Ограничение ширины */
    max-width: 300px;
  }
</style>

<p>
  Здесь основной текст статьи. Он будет обтекать фигуру, 
  которая выровнена по правому краю.
</p>

<figure class="figure-right">
  <img src="diagram.png" alt="Диаграмма потоков данных">
  <figcaption>Диаграмма потоков данных</figcaption>
</figure>

<p>
  Продолжение текста. Обратите внимание, что фигура занимает 
  место справа, а текст вокруг нее продолжает течь слева.
</p>

Комментарии в CSS и HTML показывают, за что отвечает каждый стиль.

Адаптивные изображения в figure

Для современных сайтов важно, чтобы изображения были адаптивными. Покажу вам базовый пример:

<style>
  figure img {
    /* Изображение не выходит за пределы контейнера */
    max-width: 100%;
    /* Сохраняем пропорции */
    height: auto;
    /* Блочный элемент, чтобы корректно центрировать */
    display: block;
    /* Авто-отступы для центрирования */
    margin: 0 auto;
  }
</style>

<figure>
  <img src="wide-image.jpg" alt="Широкое изображение">
  <figcaption>Адаптивное широкое изображение в figure</figcaption>
</figure>

Таким образом, картинка подстраивается под ширину фигуры, а не ломает верстку.

Нумерация фигур с помощью CSS

Иногда вам нужно автоматически нумеровать иллюстрации: "Рисунок 1", "Рисунок 2" и так далее. Это можно сделать с помощью CSS-счетчиков.

Смотрите, как это работает:

<style>
  /* Объявляем счетчик для фигур на body */
  body {
    counter-reset: figure-counter;
  }

  figure {
    /* Увеличиваем счетчик для каждой figure */
    counter-increment: figure-counter;
  }

  figcaption::before {
    /* Добавляем перед подписью текст с номером */
    content: "Рисунок " counter(figure-counter) " - ";
    /* Жирное начертание для номера */
    font-weight: bold;
  }
</style>

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

<figure>
  <img src="img2.jpg" alt="Второе изображение">
  <figcaption>Описание второго изображения</figcaption>
</figure>

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

Частые ошибки при использовании figure

Ошибка 1. Использовать figure только ради стилей

Многие разработчики по привычке оборачивают картинку в div, чтобы легче было применять стили. Иногда возникает соблазн заменить div на figure просто "чтобы было красивее". Это не лучшая практика.

figure следует использовать тогда, когда:

• есть иллюстративный блок
• есть или может быть подпись
• элемент самодостаточен по смыслу

Если вы добавляете figure только ради CSS, лучше все-таки остаться на div.

Ошибка 2. Отсутствие alt у изображений в figure

Иногда кажется, что раз у нас есть figcaption, то alt можно опустить. Это не так. alt по-прежнему нужен:

• figcaption — подпись к фигуре
• alt — текстовая альтернатива конкретному изображению

Это два разных уровня описания. Лучше, чтобы оба были продуманными.

Ошибка 3. figcaption вне figure

Иногда разработчики пишут разметку так:

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

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

Ошибка 4. Несколько figcaption в одном figure

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

Ошибка 5. Вложенные figure без необходимости

Иногда встречается такая структура:

<figure>
  <figure>
    <img src="img.jpg" alt="Изображение">
    <figcaption>Подпись к изображению</figcaption>
  </figure>
  <figcaption>Общая подпись</figcaption>
</figure>

Так делать не стоит. Спецификация не предполагает вложенные figure как нормальный сценарий. Если вам нужно несколько уровней подписи, лучше использовать другие элементы (div, p, span), но не вкладывать figure друг в друга.

Взаимодействие figure с другими семантическими тегами

figure внутри article или section

Очень часто figure размещают внутри article, section и других секционных тегов. Это полностью корректно:

<article>
  <h2>Как работает алгоритм</h2>
  <p>Сначала алгоритм анализирует входные данные...</p>

  <figure>
    <img src="algo.png" alt="Схема алгоритма">
    <figcaption>Схема работы алгоритма в упрощенном виде</figcaption>
  </figure>

  <p>После этого происходит...</p>
</article>

Таким образом вы создаете четкую структуру:

• article — логический блок текста
• figure — иллюстрация внутри него

figure и main, aside, footer

figure может находиться практически в любом месте разметки:

• внутри main — основные иллюстрации
• внутри aside — дополнительные или боковые иллюстрации
• внутри footer — логотипы, схемы, подписи к авторским правам

Пример в футере:

<footer>
  <figure>
    <img src="logo-footer.svg" alt="Логотип компании">
    <figcaption>Компания Пример - с 2010 года</figcaption>
  </figure>
</footer>

Семантически это тоже корректно.

figure и SEO

Как поисковые системы используют figure

Поисковые системы (Google, Яндекс и другие) учитывают:

• alt изображений
• текст в figcaption
• окружение (абзацы рядом с figure)

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

• на выдаче в поиске по картинкам
• на общей оценке качества страницы

Практические рекомендации для SEO

Несколько коротких, но полезных советов:

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

Например, вместо:

<figcaption>Онлайн курсы программирования JavaScript обучение JavaScript с нуля</figcaption>

Сделайте нормально читаемый текст:

<figcaption>Скриншот интерфейса платформы с онлайн курсами по JavaScript</figcaption>

Заключение

Тег figure в HTML — это не просто "еще один контейнер", а удобный инструмент для семантического оформления иллюстраций, примеров кода, диаграмм и других поясняющих блоков. Он помогает:

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

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

• figure — для самостоятельных иллюстративных блоков, а не для всего подряд
• figcaption должен быть первым или последним дочерним элементом figure
• alt у изображений по-прежнему важен, даже если есть figcaption
• внутри figure может быть несколько элементов, если они составляют один смысловой блок
• не стоит использовать несколько figcaption или вкладывать figure друг в друга без крайней необходимости

Используя тег figure осознанно, вы делаете HTML-структуру чище, а интерфейс — более понятным и предсказуемым как для пользователей, так и для вспомогательных технологий.

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

Как центрировать figure с фиксированной шириной

Если вы хотите ограничить ширину фигуры и выровнять ее по центру, используйте margin auto:

<style>
  figure.centered {
    /* Фиксированная или максимальная ширина */
    max-width: 600px;
    /* Центрирование по горизонтали */
    margin: 1.5rem auto;
  }
</style>

<figure class="centered">
  <img src="img.jpg" alt="Пример">
  <figcaption>Фигура по центру страницы</figcaption>
</figure>

Как сделать подпись поверх изображения

Можно расположить figcaption поверх картинки с помощью position absolute:

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

  .figure-overlay img {
    display: block;
  }

  .figure-overlay figcaption {
    /* Абсолютное позиционирование поверх картинки */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* Полупрозрачный фон */
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 0.5rem;
    font-size: 0.9rem;
  }
</style>

<figure class="figure-overlay">
  <img src="photo.jpg" alt="Фото города">
  <figcaption>Подпись поверх изображения</figcaption>
</figure>

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

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

<figure>
  <img src="device.png" alt="Устройство на столе">
  <figcaption>
    <p><!-- Краткое описание устройства -->
      Устройство второго поколения с улучшенной камерой.
    </p>
    <p><!-- Дополнительная техническая информация -->
      Технические характеристики - 8 ГБ ОЗУ, 256 ГБ памяти.
    </p>
  </figcaption>
</figure>

Так вы сохраняете валидность HTML и получаете несколько логических подпунктов.

Как сделать так, чтобы figure не разрывался на две страницы при печати

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

<style>
  @media print {
    figure {
      /* Запрещаем разрыв фигуры между страницами */
      page-break-inside: avoid;
      break-inside: avoid;
    }
  }
</style>

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

Как сделать подпись только при наведении курсора

Иногда нужно, чтобы подпись показывалась не всегда, а только при наведении:

<style>
  .figure-hover figcaption {
    /* Скрываем подпись по умолчанию */
    display: none;
  }

  .figure-hover:hover figcaption {
    /* Показываем подпись при наведении */
    display: block;
  }
</style>

<figure class="figure-hover">
  <img src="product.jpg" alt="Товар">
  <figcaption>Подробнее о товаре</figcaption>
</figure>

Учтите, что для доступности лучше не прятать важную информацию только за hover, но для дополнительных подсказок такой подход допустим.