<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> для аудио и видео соответственно.