Тег <figure> объединяет иллюстрацию и подпись к ней в один блок. Иллюстрацией при этом может быть не только картинка - спецификация относит сюда и схему, и фрагмент кода, и цитату, и таблицу. Тег парный, собственных атрибутов у него нет.
В этой статье
Что такое тег figure в HTML
Представьте иллюстрацию в статье: график, а под ним подпись "Рис. 1. Рост посещаемости за год". Картинка и подпись - вещи разные, но читаются как одно целое. Тег <figure> и делает их одним целым в разметке, а <figcaption> внутри него отвечает за подпись.
<figure>
<img src="grafik.png" alt="Столбчатый график посещаемости">
<figcaption>Рис. 1. Рост посещаемости за год</figcaption>
</figure>Пример: иллюстрация с подписью
Рамка и серая полоса под графиком - это CSS, сам тег ничего не рисует. Браузер добавляет <figure> только отступы по бокам, и их обычно сразу обнуляют.
Есть у тега и малоизвестная особенность: он является секционным корнем. Это значит, что заголовки, прописанные внутри него, не попадают в структуру документа и не сбивают иерархию остальной страницы.
Что оборачивают в figure: не только картинки
Самое частое заблуждение вокруг этого тега - что он про изображения. Справочники так и пишут: группирует картинку и подпись. Спецификация шире: в <figure> оборачивают любой самодостаточный материал, на который ссылается основной текст.
Кроме картинок это фрагмент кода, цитата с указанием автора, таблица с данными, стихотворение, схема, видео. Подпись у всех этих случаев играет одну роль - называет материал, чтобы на него можно было сослаться.
<figure>
<figcaption>Листинг 1. Подключение внешнего файла стилей</figcaption>
<pre><code><link rel="stylesheet" href="style.css"></code></pre>
</figure><figure>
<img src="do.jpg" alt="Страница до переделки">
<img src="posle.jpg" alt="Страница после переделки">
<figcaption>Рис. 2. Главная страница до и после переделки</figcaption>
</figure>Одно ограничение по доступности стоит знать заранее: цитату в <blockquote> внутри <figure> с подписью скринридер зачитывает многословно, повторяя роли и подпись по нескольку раз. Если цитата не нуждается в номере и названии, её проще оставить одним <blockquote>.
Как проверить, что перед вами figure
Признак ровно один, и он записан в спецификации: блок можно унести в другое место документа или вынести в приложение, и основной текст от этого не пострадает. Именно поэтому баннер или декоративная картинка в <figure> не оборачиваются - на них текст не ссылается, и уносить там нечего.
Проверьте признак на короткой статье: нажмите кнопку и посмотрите, изменится ли что-то в чтении.
За год посещаемость сайта выросла втрое, причём рост пришёлся в основном на осенние месяцы.
Как видно на рис. 1, летом показатели держались на одном уровне, а подъём начался в сентябре.
Дальше мы разберём, что именно изменилось на сайте в сентябре и какие из этих изменений дали основной эффект.
Иллюстрация стоит по ходу текста. Привычно, но не обязательно: обратите внимание, что текст ссылается на неё по номеру, а не словами "на картинке ниже".
Блок уехал в конец, а статья читается ровно так же. Ссылка "как видно на рис. 1" продолжает работать, потому что подпись даёт иллюстрации номер. Это и есть самодостаточность - признак, по которому тег выбирают.
Отсюда же понятно, когда <figure> не нужен. Декоративная картинка или баннер - это просто <img>. Блок, связанный с темой, но не обязательный для понимания текста, - это aside. Разница между ними тонкая: <figure> на текст работает, <aside> текст сопровождает.
Подпись: тег figcaption и его место
Подпись прописывается тегом figcaption и подчиняется двум правилам. Первое: она должна быть первым или последним потомком <figure>, в середину её прописать нельзя. Второе: подпись в блоке допускается только одна.
<figure>
<figcaption>Подпись сверху</figcaption>
<img src="foto.jpg" alt="Описание">
</figure>
<figure>
<img src="foto.jpg" alt="Описание">
<figcaption>Подпись снизу</figcaption>
</figure>Сама подпись при этом не заменяет атрибут alt у картинки. Это разные вещи: alt описывает, что изображено, а подпись называет иллюстрацию и комментирует её. Обе нужны, и текст в них должен различаться - дублировать одну фразу в оба места смысла нет. Подробный разбор этой пары, доступное название блока и тонкости с alt - на отдельной странице: Тег figcaption в HTML: подпись к иллюстрации .
Без подписи <figure> тоже валиден, но чаще всего это признак того, что тег взят зря: если называть нечего и ссылаться на блок никто не собирается, достаточно обычного <img>.
Подробный разбор самой подписи - её место, отличие от alt и спорный вопрос о том, даёт ли она название блоку - на странице тега figcaption.
Частые ошибки
Большая часть промахов с этим тегом - следствие одного и того же: его прописывают вокруг любой картинки по привычке, не проверив, нужен ли он там вообще.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
В <figure> обёрнута каждая картинка на странице |
Тег перестаёт что-либо обозначать, разметка тяжелеет без пользы | Оставить его там, где на блок ссылается текст и есть подпись |
У картинки внутри пропущен alt |
Подпись его не заменяет, и для скринридера изображение остаётся без описания | Прописать alt, а в подписи дать другой по смыслу текст |
| Подпись прописана между изображениями, в середине блока | Валидатор W3C выдаёт ошибку: место подписи только первое или последнее | Перенести <figcaption> в начало или в конец |
В одном <figure> несколько подписей |
Учитывается только первая, остальные попадают в разметку впустую | Свести подписи в одну или разделить блок на несколько |
Вопросы и ответы
Нужен ли figure для каждой картинки?
Нет. Тег нужен там, где у изображения есть подпись и где на него ссылается основной текст. Логотип, иконка, баннер, декоративный фон обходятся обычным img - оборачивать их в figure не только не обязательно, но и вредно: чем чаще тег встречается без повода, тем меньше он значит.
Чем figcaption отличается от caption?
Это разные теги для разных блоков. figcaption - подпись к иллюстрации внутри figure. caption - название таблицы, и прописывается он только внутри table, первым элементом. Перепутать их легко из-за похожих названий, но в чужом месте ни один из них работать не будет.
