HTML-тег <figure>
Тег <figure> используется для обозначения самостоятельного контента. Этот тег может содержать диаграммы, изображения, иллюстрации, примеры кода и т. д.
Тег <figure> является одним из элементов HTML5.
Содержимое тега <figure> связано с основным потоковым контентом. Однако оно воспринимается как автономная единица.
Чтобы добавить подпись или пояснение к содержимому тега <figure>, используется тег <figcaption>. Тег <figcaption> включается в тег <figure> и размещается в качестве первого или последнего дочернего элемента. Если <figcaption> является первым вложенным элементом, то содержимое будет отображаться вверху изображения.
Синтаксис
Тег <figure> парный. Содержимое записывается между открывающим (<figure>) и закрывающим (</figure>) тегами.
Пример использования HTML-тега <figure>:
HTML-тег <figure>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>A cute baby</p>
<figure>
<img src="https://ru.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200" />
</figure>
</body>
</html>Результат
Различия между тегами <figure> и <aside>
Оба этих тега имеют схожее поведение. Однако существуют некоторые различия. В частности, элемент <figure> предназначен для контента, который напрямую связан с основным содержимым. Тег <aside> используется для контента, связанного «косвенно». Он предоставляет инфографику, цитаты или диаграммы для конкретного контента.
Атрибуты
Тег <figure> поддерживает глобальные атрибуты и атрибуты событий.
Практика
Какова функция тега <figure> в HTML?