Картинка с подписью под ней - это не просто <img> и абзац текста рядом. Для этого в HTML есть отдельная пара тегов: <figure> оборачивает содержимое как единый смысловой блок, а <figcaption> - его подпись. У этой пары есть свои правила и своя роль, отличная от уже знакомого атрибута alt.
В этом уроке
Попробуй переставить figcaption в начало figure, перед img - подпись всё ещё будет привязана к картинке.
Тег figure
Тег <figure> оборачивает содержимое, которое можно вырезать из текста статьи и перенести в другое место (например, в приложение или галерею) - при этом смысл основного текста не потеряется, потому что на такой блок можно сослаться словами вроде «см. иллюстрацию». Чаще всего внутри figure - картинка, но это не обязательно: подойдёт пример кода, цитата или диаграмма, если это самостоятельный, вынесенный в сторону от основного текста блок.
<figure><img src="/images/graf.png" alt="График роста"><figcaption>Рис. 1</figcaption></figure> - самостоятельный блок с картинкой и подписью.
<p><img src="/images/graf.png" alt="График роста"></p><p>Рис. 1</p> - картинка и подпись существуют как два обычных абзаца, ничем формально не связанных друг с другом.
Тег figcaption
Тег <figcaption> - подпись к содержимому figure, показывается на странице как обычный видимый текст. Его можно поставить и первым, и последним дочерним элементом внутри figure - в обоих случаях он будет опознан как подпись. Если figcaption в figure несколько, подписью считается только первый найденный.
<figure><figcaption>Рис. 1</figcaption><img src="/images/graf.png" alt="График роста"></figure> - подпись первым элементом тоже сработает.
<figure><img src="/images/graf.png" alt="График роста"><p>Рис. 1</p></figure> - обычный p внутри figure не станет подписью, даже если выглядит похоже.
figcaption и alt - в чём разница
Атрибут alt и тег figcaption решают разные задачи, хотя оба вроде бы «про картинку». alt - функциональное описание того, что изображено, предназначенное для случаев, когда картинку не видно (не загрузилась, читает программа чтения с экрана). figcaption - видимая подпись для всех читателей, и в ней уместно то, что не годится в alt: пояснение, почему эта иллюстрация здесь, а не просто что на ней. Повторять в figcaption слово в слово текст из alt не стоит - для человека с программой чтения с экрана это прозвучит как одно и то же дважды.
<img src="..." alt="Синий график роста продаж"><figcaption>Рис. 1 - продажи выросли после запуска новой формы заказа</figcaption> - alt описывает картинку, figcaption поясняет её роль в статье.
<img src="..." alt="Синий график роста продаж"><figcaption>Синий график роста продаж</figcaption> - alt и figcaption дословно повторяют друг друга.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Подписывать картинку обычным p рядом с img вместо figure и figcaption | Картинка и подпись формально никак не связаны друг с другом в разметке | Оборачивать пару в figure, а подпись оформлять через figcaption |
| Считать, что внутри figure обязательно должна быть картинка | Пропускаются законные случаи: код, цитата, диаграмма тоже можно оформить как figure | Использовать figure для любого самостоятельного блока содержимого с подписью, не только для img |
| Оформлять подпись как обычный p внутри figure | p не опознаётся как подпись - это просто ещё один абзац внутри блока | Использовать именно figcaption - первым или последним элементом внутри figure |
| Дублировать в figcaption текст из alt слово в слово | Для программы чтения с экрана описание звучит дважды подряд | Делать alt функциональным описанием, а figcaption - отдельной, дополняющей подписью |
Шпаргалка
| Термин | Значение |
|---|---|
| figure | Самостоятельный блок содержимого (картинка, код, цитата, диаграмма), который можно вынести без потери смысла текста |
| figcaption | Подпись к содержимому figure - первый или последний дочерний элемент |
| alt | Функциональное описание картинки для тех, кто её не видит |
| figcaption vs alt | figcaption - видимая подпись для всех, alt - невидимая замена для тех, кто не видит картинку; повторять текст не стоит |
Коротко: отвечаем на вопросы
Обязательно ли внутри figure должна быть именно картинка?
Нет. figure - для любого самостоятельного блока содержимого с подписью: картинки, примера кода, цитаты, диаграммы. Общее условие одно - этот блок можно вынести из текста без потери смысла, потому что на него можно сослаться словами.
Можно ли поставить figcaption перед содержимым, а не после?
Да. figcaption опознаётся как подпись, если стоит первым или последним дочерним элементом внутри figure - оба варианта допустимы. Если внутри несколько figcaption, подписью считается только первый найденный.
Чем figcaption отличается от alt, если оба вроде описывают картинку?
alt - функциональное описание для случаев, когда картинку не видно: не загрузилась или её читает программа чтения с экрана. figcaption - видимая подпись для всех читателей, и в ней уместно то, чего нет в alt, например пояснение, почему эта иллюстрация здесь. Дублировать текст между ними не стоит - для программы чтения с экрана это прозвучит как повтор.
