HTML-тег <figure>

HTML-тег <figure> используется для группировки самостоятельных элементов контента, таких как изображения, иллюстрации, диаграммы, графики и другие медиаэлементы, вместе с их подписями. Он придаёт контенту семантическое значение и помогает улучшить доступность и структуру веб-страниц.

Обычно тег <figure> используется в паре с тегом <figcaption> для создания подписи к сгруппированному контенту. Элемент <figure> и его контент рассматриваются как единое целое, которое можно перемещать и позиционировать независимо друг от друга.

Базовый синтаксис HTML-тега <figure>

Основной синтаксис тега <figure> : 

<figure>
    Media content(e.g., images, videos, or diagrams)
    <figcaption>Caption for the content</figcaption>
</figure>

Элемент <figcaption> предоставляет описательную подпись для содержимого <figure> . Он может быть первым или последним дочерним элементом тега <figure> .

Атрибуты HTML-тега <figure>

  • Глобальные атрибуты: Тег <figure> поддерживает все глобальные атрибуты, такие как id , class , style и title .
  • Атрибуты событий: Тег <figure> поддерживает такие атрибуты событий, как onclick , onmouseover и onfocus .

Базовый пример HTML-тега <figure>

Вот пример использования тега <figure> для группировки изображения и его подписи: 

<!DOCTYPE html>
<html>
    <body>
        <h2>Image with Caption</h2>
        <figure>
            <img src="mountains.jpg" alt="Snow-capped mountains" width="500">
            <figcaption>Snow-capped mountains under a clear blue sky.</figcaption>
        </figure>
    </body>
</html>
Базовый пример HTML-тега

Пояснение: <figure> группирует изображение и его подпись вместе как единое целое.

Использование <figure> с видео

Тег <figure> также можно использовать для группировки видео с их субтитрами: 

<!DOCTYPE html>
<html>
    <body>
        <h2>Video with Caption</h2>
        <figure>
            <video controls width="500">
                <source src="ScreenRecording198.mov" type="video/mp4">
                Your browser does not support the video tag.
            </video>
            <figcaption>A screen recording of HTML tutorial.</figcaption>
        </figure>
    </body>
</html>
Использование figure с видео

Пояснение: <figure> группирует видео и его подпись, рассматривая их как единую семантическую единицу.

Оформление тега <figure> с помощью CSS

Вы можете стилизовать теги <figure> и <figcaption> с помощью CSS, чтобы улучшить их внешний вид: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            figure {
                border: 2px solid #ddd;
                padding: 10px;
                margin: 20px auto;
                text-align: center;
                width: 400px;
            }

            figcaption {
                font-style: italic;
                color: #555;
                margin-top: 10px;
            }
        </style>
    </head>
    <body>
        <h2>Styled Figure Example</h2>
        <figure>
            <img src="mountains.jpg" alt="Mountains" width="400">
            <figcaption>Mountains under blue sky.</figcaption>
        </figure>
    </body>
</html>
Оформление рисунка Тег с помощью CSS

Результат: Рисунок имеет стилизованную рамку и отступы, а подпись отображается курсивом и располагается по центру под изображением.

Практическое применение тега <figure>

  • Галереи изображений: группируйте изображения с подписями для лучшей организации в фотогалереях.
  • Визуализация данных: используйте <figure> для группировки диаграмм, графиков или инфографики с пояснительными подписями.
  • Образовательный контент: включайте в учебные материалы диаграммы или иллюстрации с описательными подписями.
  • Доступность: повысьте доступность, связав субтитры с визуальным или медиа-контентом.

Расширенный пример: фигуры с несколькими изображениями

Тег <figure> может группировать несколько изображений с одной подписью: 

<!DOCTYPE html>
<html>
    <body>
        <h2>Multiple Images in a Figure</h2>
        <figure>
            <img src="lake.jpg" alt="A tranquil lake" width="300">
            <img src="mountain.jpg" alt="A majestic mountain" width="300">
            <figcaption>A serene lake and a majestic mountain captured during a hike.</figcaption>
        </figure>
    </body>
</html>

Пояснение: <figure> группирует два изображения вместе с общей подписью, представляя их как единое целое.