HTML-тег <figure>

Характеристики

• Тип: блочный, статичный, семантический
• Назначение: Используется для группирования иллюстраций, диаграмм, фотографий, кодовых листингов или другого медиа-контента с возможностью добавить подпись с помощью <figcaption>.
• Родители: Любые HTML-теги, которые могут содержать блочные элементы.
• Потомки: Медиа-контент, <figcaption> и другие связанные элементы.
• Глобальные атрибуты: все
• Атрибуты событий: все

Пример использования

<figure>
  <img src="image.jpg" alt="Описание изображения">
  <figcaption>Подпись к изображению</figcaption>
</figure>

Использование в JavaScript

// Получение элемента <figure>
const figureElement = document.querySelector('figure');

// Добавление класса
figureElement.classList.add('image-figure');

// Изменение стиля
figureElement.style.border = '1px solid #ccc';

Рекомендации по обеспечению доступности (a11y)

• Используйте <figure> для группировки медиа-контента с подписью.
• Всегда предоставляйте альтернативный текст для изображений с помощью атрибута alt.

Полезные ссылки