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

Семантическая роль элементов

Тег <figure> обозначает самодостаточный блок контента, который может быть перемещен в другое место без потери смысла. Он включает изображение и его пояснение.

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

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

Практическая структура кода

Стандартная схема выглядит так: <figure> содержит внутри <img>, <figcaption> и, при необходимости, дополнительный текст пояснения.

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

<figure>
<img src="diagram.png" alt="Диаграмма роста продаж">
<figcaption>Рост продаж после внедрения email-рассылок</figcaption>
<p>Здесь показано, как персонализация влияет на конверсию.</p>
</figure>

Как писать подписи в figcaption

Подпись должна быть краткой и информативной. Избегайте повторов текста alt, если он уже описывает изображение.

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

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

Доступность и скринридеры

Скринридеры читают содержимое figcaption как часть описания изображения, что критично для незрячих пользователей.

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

Для интерактивных элементов внутри figure добавьте обработчики событий на сам контейнер или отдельные элементы.

SEO-эффект от правильной разметки

Поисковые системы анализируют текст в figcaption как сигнал релевантности изображения запросу.

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

Изображения с подписями часто получают больше кликов в сниппетах поиска, если подпись содержит ключевые слова.

Типичные ошибки

Не используйте <figure> для простых картинок без пояснений — это перегружает DOM и снижает производительность.

Избегайте пустых подписей или тех, что дублируют alt-текст слово в слово.

Не размещайте внутри figure элементы, которые должны управляться отдельно (например, модальные окна), если они не являются частью изображения.

Оценка качества реализации

Проверьте, чтобы каждый <img> имел соответствующий ему <figcaption>, если изображение несет смысловую нагрузку.

Используйте инструменты доступности (например, axe DevTools), чтобы убедиться, что скринридеры корректно читают подписи.

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

Вопросы и ответы

Можно ли использовать figcaption без figure?

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

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

Используйте CSS-свойства media queries для изменения размера шрифта или расположения подписи под изображением на экранах меньше 768px.

Нужно ли добавлять figure ко всем изображениям в статье?

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

По теме

<figure>
  <img src="chart.png" alt="График конверсии">
  <figcaption>Конверсия выросла на 15% после оптимизации формы</figcaption>
</figure>

Похожие статьи