Тег <figure>

Описание

Тег <figure> представляет самостоятельный контент с необязательной подписью (<figcaption>). Используется для семантической группировки изображений, диаграмм, кода и другого медиа-контента.

Изображение с подписью:
<figure> <img src="sunset.jpg" alt="Закат над океаном"> <figcaption>Фотография заката на побережье</figcaption> </figure>
Блок кода с описанием:
<figure> <pre><code>function greet() { console.log("Hello World!"); }</code></pre> <figcaption>Листинг 1: Функция приветствия на JavaScript</figcaption> </figure>
Видео с пояснением:
<figure> <video controls src="tutorial.mp4"></video> <figcaption>Видео 2: Инструкция по установке</figcaption> </figure>

Ключевые особенности:

  • Семантический контейнер для автономного контента
  • Может содержать <figcaption> (первым или последним элементом)
  • Не влияет на поток документа (может быть перемещен без потери смысла)
  • Поддерживает любые типы контента (изображения, видео, код, таблицы)
  • Важен для доступности и SEO

Рекомендации по использованию:

  • Используйте для контента, который можно перенести в приложение
  • Добавляйте подписи для пояснения контекста
  • Для декоративных изображений не используйте <figure>
  • Сочетайте с ARIA-атрибутами для сложных случаев

Тег <figure> является важным инструментом семантической разметки для медиа-контента в современных HTML-документах.

Атрибуты

accesskey Определяет горячую клавишу для активации элемента
class Задает CSS-классы для стилизации элемента
contenteditable Позволяет редактировать содержимое элемента
data-* Хранит пользовательские данные
dir Определяет направление текста (ltr/rtl)
hidden Скрывает элемент от просмотра
id Уникальный идентификатор элемента
lang Указывает язык содержимого
spellcheck Включает проверку орфографии
style Задает инлайновые CSS-стили
tabindex Определяет порядок перехода по Tab
title Добавляет всплывающую подсказку
translate Определяет возможность перевода содержимого

Поддержка браузерами
9.0 8.0 9.2 4.0 5.0