Подпись иллюстрации

Подпись под картинкой можно сделать обычным абзацем, и визуально разницы не будет. Но для браузера, экранного диктора и поисковика такой абзац — просто текст, стоящий рядом. Пара figure и figcaption прямо говорит: вот самостоятельный фрагмент, а вот его подпись. Это часть семантической разметки. Элемент figcaption должен быть первым или последним дочерним элементом figure, и подпись у фигуры может быть только одна.

Пример разметки

<figure>
  <img src="/upload/scheme.png"
       alt="Схема: заявка с сайта уходит в CRM и на почту менеджера">
  <figcaption>Рис. 2. Путь заявки после отправки формы</figcaption>
</figure>

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

Подпись и alt — не одно и то же

Alt-текст заменяет изображение для тех, кто его не видит, и отвечает на вопрос «что изображено». Подпись дополняет изображение для всех: номер рисунка, источник, комментарий, автор фото. Если в подписи уже полностью описано содержимое, alt не стоит повторять дословно — диктор прочитает одно и то же дважды. Но и оставлять alt пустым у содержательной картинки только из-за подписи не нужно.

Как это выводят CMS

Блок «Изображение» в редакторе WordPress сохраняет картинку как figure с figcaption, если заполнить поле подписи. Для классических тем, где подписи выводятся шорткодом, HTML5-разметку включают строкой add_theme_support( 'html5', array( 'caption' ) ) в functions.php. В 1С-Битриксе разметку подписи задают в шаблоне компонента, а сам текст хранят, например, в описании файла или в отдельном свойстве инфоблока.