Тег <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.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

<div>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<dl>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<option>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<ul>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023