Тег <figcaption> задаёт подпись к иллюстрации - той, что обёрнута тегом figure. Вне его он не применяется: это единственный допустимый родитель. Тег парный, собственных атрибутов у него нет.
В этой статье
Что такое тег figcaption
Подпись под графиком "Рис. 1. Рост посещаемости за год" - это и есть <figcaption>. Она нужна затем, чтобы на иллюстрацию можно было сослаться из текста и чтобы читатель понимал, что именно перед ним изображено.
Работает тег только в паре с <figure>. Подпись к картинке, которая не обёрнута этим тегом, размечают обычным <p> - <figcaption> в другом месте будет ошибкой разметки.
<figure>
<img src="grafik.png" alt="Столбчатый график посещаемости">
<figcaption>Рис. 1. Рост посещаемости за год</figcaption>
</figure>Внутри подписи допустим обычный текст и любые строчные теги: ссылка на источник, выделение, <cite> с автором фотографии.
Где находится подпись и сколько её может быть
Правил два, и оба жёсткие. Подпись должна быть первым или последним потомком <figure> - в середину блока, между двумя изображениями, её прописать нельзя. И подпись в блоке допускается только одна.
Встречается утверждение, будто подпись можно разместить где угодно внутри блока и будто количество ничем не ограничено. Это неверно: валидатор W3C отметит и то, и другое.
<figure>
<figcaption>Подпись первым потомком</figcaption>
<img src="foto.jpg" alt="Описание">
</figure>
<figure>
<img src="foto.jpg" alt="Описание">
<figcaption>Подпись последним потомком</figcaption>
</figure>Пример: подпись сверху и подпись снизу
figcaption первым
figcaption последним
Выбор между верхом и низом - вопрос оформления, а не правильности. В книгах и научных работах подпись к таблице обычно идёт сверху, к рисунку - снизу; в вебе чаще встречается нижняя.
Подпись и атрибут alt: в чём разница
Эти две вещи путают постоянно, и от путаницы страдает как раз тот, ради кого всё затевалось. Разница простая: alt отвечает на вопрос "что изображено", подпись - на вопрос "что это за иллюстрация и зачем она здесь".
alt не виден на экране и предназначен тем, кто изображение не видит: скринридеру или браузеру, если картинка не загрузилась. Подпись видна всем и читается как часть статьи.
<figure>
<img src="grafik.png"
alt="Столбчатая диаграмма: с января по август около 2000
посещений в месяц, с сентября рост до 6000">
<figcaption>Рис. 1. Рост посещаемости после переделки главной</figcaption>
</figure>Дублировать одну фразу в оба места не нужно: скринридер зачитает её дважды подряд. И подпись не отменяет alt - если атрибут пропустить, изображение останется без описания, сколько бы подписей ни стояло рядом.
Даёт ли подпись название блоку
Вопрос выглядит простым, но ответ на него за последние годы менялся, и справочники разошлись. Английская версия MDN пишет, что подпись даёт блоку <figure> доступное название. Русская версия той же страницы утверждает обратное.
Ошибки тут нет ни у одной из сторон - обе описывают разные моменты времени. Изначально подпись действительно работала названием блока, но у этого было неприятное следствие: скринридер зачитывал её дважды - сначала как название, потом как содержимое. Поэтому сопоставление решили изменить и связь "блок назван подписью" заменить на "подпись - это подробности о блоке". Изменение прошло не до конца: оно перенесено в общий репозиторий спецификаций ARIA и на момент написания реализовано не во всех браузерах.
Практический вывод из этого один и он не зависит от того, чем закончится спор. На подпись как на название блока полагаться не стоит. Если блоку действительно нужно название - например, чтобы отличать несколько иллюстраций в списке ориентиров - его задают явно атрибутом aria-label или aria-labelledby. А обычной иллюстрации в статье название блока не требуется вовсе: ей хватает подписи и alt у картинки.
Частые ошибки
Ошибок с этим тегом немного - он простой. Но три из четырёх ниже валидатор отмечает прямо, так что проверить разметку стоит.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
<figcaption> прописан вне <figure> |
Валидатор W3C выдаёт ошибку: другого родителя у тега нет | Обернуть иллюстрацию в <figure> или заменить подпись на <p> |
| Подпись прописана в середине блока | Та же ошибка валидации: место только первое или последнее | Перенести подпись в начало или в конец |
| В одном блоке несколько подписей | Учитывается только первая, остальные в разметке лишние | Свести текст в одну подпись |
Текст подписи дословно повторяет alt |
Скринридер зачитывает одну и ту же фразу дважды подряд | В alt описать изображение, в подписи назвать иллюстрацию |
