Тег <figure>: пример с подписью
Как связать изображение, схему или фрагмент кода с поясняющей подписью.
Зачем нужен этот элемент
figure группирует самостоятельную иллюстрацию с окружающим контекстом. Это может быть изображение, диаграмма, цитата или пример кода. Подпись помещается в figcaption и объясняет, что читатель должен заметить.
Подпись не отменяет alt у вложенного изображения. У них разные задачи: alt заменяет смысл самой картинки, figcaption добавляет контекст. Если иллюстрации не нужна отдельная подпись и группировка, обычного img может быть достаточно.
Синтаксис и пример
<figure>
<pre><code><h1>Привет, веб!</h1></code></pre>
<figcaption>Один заголовок первого уровня в документе.</figcaption>
</figure>Что важно в разметке
| Параметр | Как использовать |
|---|---|
| figcaption | Подпись первым или последним дочерним элементом. |
| Содержимое | Изображение, пример кода или другая иллюстрация. |
| Отступы | Браузерные margin можно изменить CSS. |
Частая ошибка
Не повторяйте длинную подпись дословно в alt. Опишите изображение и контекст так, чтобы информация не дублировалась без пользы.
Небольшая практика
Добавьте к примеру кода подпись, объясняющую его результат. Попробуйте переместить figcaption перед кодом.
Разберите также <img>, <p>: эти элементы пригодятся в том же интерфейсе.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.