<figure>
- 25 января 2023
Тег <figure>
используется для вставки на страницу изображений, видео, аудио и другого медиаконтента, а также добавления подписей и описания к этому контенту.
Синтаксис тега <figure>
<figure>
<img src="path/to/image.jpg" alt="Описание изображения">
<figcaption>Подпись к изображению</figcaption>
</figure>
Спецификация HTML
Тег является частью спецификации HTML Living Standard.
Семантический или нет
Тег <figure>
является семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.
Примеры использования
Показ изображения с подписью:
<figure>
<img src="path/to/image.jpg" alt="Описание изображения">
<figcaption>Подпись к изображению</figcaption>
</figure>
Вставка видео с описанием:
<figure>
<video src="path/to/video.mp4" controls></video>
<figcaption>Подпись к видео</figcaption>
</figure>
Отображение графиков и диаграмм:
<figure>
<svg>
...
</svg>
<figcaption>Подпись к графику/диаграмме</figcaption>
</figure>
Показ музыкальных композиций с информацией об исполнителе:
<figure>
<audio src="path/to/music.mp3" controls></audio>
<figcaption>Название композиции, исполнитель</figcaption>
</figure>
Показ кода с пояснением:
<figure>
<pre>
<code>
// Код на языке JavaScript
function sayHello() {
console.log("Hello, World!");
}
</code>
</pre>
<figcaption>Код на JavaScript</figcaption>
</figure>
Группировка картинок в галерею:
<figure>
<img src="path/to/image1.jpg" alt="Описание изображения 1">
<figcaption>Подпись к изображению 1</figcaption>
</figure>
<figure>
<img src="path/to/image2.jpg" alt="Описание изображения 2">
<figcaption>Подпись к изображению 2</figcaption>
</figure>
Показ таблицы с описанием:
<figure>
<table>
...
</table>
<figcaption>Описание таблицы</figcaption>
</figure>
Для чего использовать тег <figure>
- Сгруппировать изображения или другой мультимедиа контент с его описанием.
- Указать связь между изображением и его описанием, которое представляет тег
<figcaption>
. - Создать контейнер, который можно стилизовать с помощью CSS, например, для добавления рамки вокруг изображения.
- Улучшить поисковую оптимизацию (SEO), так как
<figure>
является семантическим элементом. - Улучшить доступность контента для пользователей, использующих скринридеры или другие вспомогательные технологии, поскольку
<figure>
предоставляет ясную связь между контентом и его описанием.
Атрибуты тега <figure>
У тега нет контентных атрибутов.
Глобальные атрибуты
Тег поддерживает все глобальные атрибуты HTML.
Ограничения
Для использования тега <figure>
нет никаких ограничений.
Нюансы
- Внутри тега
<figure>
можно использовать тег<figcaption>
, который предназначен для создания подписей к медиаконтенту. - Подпись к медиаконтенту необязательна, но она повышает понимание контекста страницы для поисковых систем и пользователей со сниженной зрительной способностью.
Поддержка браузерами
Тег <figure>
поддерживается всеми современными браузерами. Актуальная информация — на caniuse.
Альтернативные теги
Если не нужно добавлять подпись к медиаконтенту, можно использовать тег <img>
для изображений и теги <audio>
и <video>
для аудио и видео соответственно.
Чем заменить тег
Прямой замены тегу <figure>
не существует.
Актуальность
Тег <figure>
является актуальным, можете использовать его в веб-разработке.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023