• Теория
  • Теория

Теги figure и figcaption, картинки с подписями

Теперь, когда шаблон поста готов, можно добавить в блог ещё несколько коротких записей. А начнём с фотопоста.

Для его разметки используем тег <figure> — он обозначает цельный и независимый блок содержания. Внутри этого тега размещают демонстрационный материал: изображения, схемы, куски кода и так далее.

Обычно каждый такой материал сопровождает разъясняющий комментарий или «легенда». Для обозначения этого комментария и предназначен ещё один новый тег — <figcaption>, который размещается первым или последним элементом внутри <figure>. Пример:

<figure>
  схема,
  график,
  диаграмма
  и так далее
  <figcaption>Легенда</figcaption>
</figure>

Подробно про <figure> уже рассказывалось в прошлой части.

Мы используем этот тег для более прозаичных целей.

Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 27 мая по 29 июля 2024. Цена 22 900 ₽

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Возможности HTML и CSS» тренажёра «Продвинутые возможности HTML» можно после регистрации и оформления подписки.