Изображение с подписью как самостоятельная группа
Figure объединяет иллюстрацию и подпись, чтобы их связь сохранялась при переносе группы в другое место статьи.
Назначение
Figure объединяет иллюстрацию и подпись, чтобы их связь сохранялась при переносе группы в другое место статьи.
Как это работает
Figcaption описывает группу видимым текстом, а alt изображения решает задачу текстовой альтернативы. Эти тексты могут дополнять друг друга, но не должны без необходимости полностью повторяться.
Пример
<style>figure{margin:0;max-width:28rem}figure img{display:block;width:100%;height:auto}figcaption{padding-top:8px;font-size:.9rem}</style>
<figure><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='120'%3E%3Crect width='320' height='120' fill='%2311694e'/%3E%3C/svg%3E" alt="Зелёный цветовой образец" width="320" height="120"><figcaption>Рисунок 1. Демонстрационный образец оформления.</figcaption></figure>Что должно получиться
Картинка сохраняет пропорции, подпись следует непосредственно за ней. Размеры заранее задают соотношение сторон, а описание не зависит от загрузки внешнего ресурса.
Граница применения и частая ошибка
Не прячьте важное описание только в CSS-псевдоэлементе под картинкой. И не используйте подпись как оправдание отсутствия необходимой альтернативы у смыслового изображения.
Самостоятельная проверка
Подставьте собственную схему, напишите краткий alt и отдельную подпись с контекстом. Сузьте контейнер и проверьте, что подпись не отделяется визуально от изображения.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.