Как добавить подпись к картинке
Короткий ответ
Оберните картинку в <figure>, а подпись положите в <figcaption>:
<figure style="margin: 0; width: 240px;">
<img src="/media/photo-400x250.jpg" alt="A pink flower in the garden" style="width: 100%; height: auto; display: block;">
<figcaption style="margin-top: 6px; color: gray; font-size: 14px;">Photo: the city garden in May</figcaption>
</figure><figure> связывает картинку и подпись в одно целое, и программы чтения с экрана читают их вместе. У <figure> есть стандартные отступы по бокам — обычно их обнуляют.
Подпись поверх картинки
Подпись можно положить на нижний край изображения с полупрозрачным фоном:
<style>
.photo { position: relative; width: 240px; margin: 0; }
.photo img { width: 100%; height: auto; display: block; border-radius: 8px; }
.photo figcaption { position: absolute; inset: auto 0 0; padding: 6px 10px; border-radius: 0 0 8px 8px; background: rgb(0 0 0 / 0.6); color: white; }
</style>
<figure class="photo">
<img src="/media/photo-400x250.jpg" alt="A pink flower">
<figcaption>City garden, May</figcaption>
</figure>alt и подпись
alt описывает, что изображено, для тех, кто картинку не видит. Подпись — видимый всем комментарий: автор, место, пояснение. Не повторяйте одно и то же в обоих местах.
Частая ошибка
Подпись пишут обычным абзацем под картинкой. Визуально разницы нет, но связь между ними теряется: для браузера и поисковиков это просто текст рядом. Используйте <figure> и <figcaption>.
Функции из этого ответа
- <figure> — Самостоятельная иллюстрация — картинка, схема, код или цитата — с подписью `<figcaption>`.
- <img> — Картинка.
- alt — Текстовая альтернатива картинке: читается программами чтения с экрана и показывается, если картинка не загрузилась.
- position — Как позиционируется элемент: в обычном потоке или по смещениям.