HTML-тег <figcaption>

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

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

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

Базовая структура тега <figcaption> с элементом <figure> : 

<figure>
    <img src="image.jpg" alt="Description of the image">
    <figcaption>Caption for the image</figcaption>
</figure>

Здесь <figcaption> предоставляет подпись для изображения внутри <figure> .

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

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

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

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

<!DOCTYPE html>
<html>
    <body>
        <h2>Image with Caption</h2>
        <figure>
            <img src="mountains.jpg" alt="A beautiful scene">
            <figcaption>A stunning background of mountains</figcaption>
        </figure>
    </body>
</html>
Базовый пример HTML-тега figcaption

Пояснение: Тег <figcaption> предоставляет описание(«Потрясающий закат, снятый на пляже») для изображения заката, делая его более содержательным.

Позиционирование тега <figcaption>

Тег <figcaption> можно разместить перед основным содержимым или после него в <figure> . Вот пример размещения его в начале: 

<!DOCTYPE html>
<html>
    <body>
        <h2>Caption at the Top</h2>
        <figure>
            <figcaption>The Milky Way Galaxy as seen from Earth.</figcaption>
            <img src="milkyway.jpg" alt="The Milky Way Galaxy">
        </figure>
    </body>
</html>
Размещение тега figcaption

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

Стилизация тега <figcaption> с помощью CSS

Вы можете стилизовать тег <figcaption> чтобы улучшить его внешний вид: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            img {
              width: 100%;
            }
            figure {
                border: 2px solid #ccc;
                padding: 10px;
                text-align: center;
            }

            figcaption {
                font-style: italic;
                color: #555;
                margin-top: 10px;
            }
        </style>
    </head>
    <body>
        <h2>Image with Caption</h2>
        <figure>
            <figcaption>A stunning background of mountains</figcaption>
            <img src="mountains.jpg" alt="A beautiful scene">
        </figure>
    </body>
</html>
Оформление тега figcaption с помощью CSS

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

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

  • Описания изображений: добавляйте подписи к изображениям в статьях или блогах для лучшего понимания.
  • Диаграммы и графики: используйте подписи для пояснения визуальных представлений данных, таких как круговые диаграммы или столбчатые диаграммы.
  • Иллюстрации: добавляйте контекст к иллюстрациям или схемам в образовательном или техническом контенте.
  • Доступность: Улучшите доступность, добавив описательные подписи, чтобы помочь пользователям программ чтения с экрана.

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

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

<!DOCTYPE html>
<html>
    <body>
        <h2>Multiple Media Example</h2>
        <figure>
            <img src="planet.jpg" alt="A planet in space" width="300">
            <video controls width="300">
                <source src="spacewalk.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
            <figcaption>A planet and a spacewalk video.</figcaption>
        </figure>
    </body>
</html>

Пояснение: Изображение и видео объединены под одной подписью, создавая целостную медиапрезентацию.