HTML тег <figure>

Значение и применение

Тег <figure> html5 применяется для обозначения контента, иллюстрирующего или поддерживающего определенную идею текста. Тег <figure> html5 может содержать изображение, видеоролик, схему, фрагмент кода, диаграмму или даже таблицу — почти все, что может встретиться в потоке веб-контента и должно восприниматься как автономная единица.

Благодаря тегу <figcaption> html5 вы можете вывести пояснение к содержимому, которое находится внутри тега <figure> html5 . Тег <figcaption> html5 должен размещаться как первый, или последний элемент внутри тега <figure> html5 .

Поддержка браузерами

Тег	Chrome	Firefox	Opera	Safari	IExplorer	Edge
<figure>	6.0	4.0	11.1	5.0	9.0	12.0

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

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <figure></title>
	</head>
	<body>
		<main>
			<figure>
				<img src = "10.jpg" alt = "ничоси" width = "80" height = "80">
				<figcaption>Ничоси 1</figcaption>
			</figure>
			<figure>
				<img src = "10.jpg" alt = "ничоси" width = "80" height = "80">
				<figcaption>Ничоси 2</figcaption>
			</figure>
		</main>
	</body>
</html>

В этом примере основное содержимое документа поместили внутри тега <main> html5 , в который мы поместили два элемента <figure> html5 , каждый из которых содержит внутри себя изображение (тег <img>) шириной и высотой 80 пикселей. Кроме того тегом <figcaption> html5 мы вывели текстовое пояснение к содержимому каждого элемента <figure> html5 . Элемент <figcaption> html5 мы разместитили перед закрывающим тегом </figure>.

Результат нашего примера:

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

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <figcaption></title>
	</head>
	<body>
		<main>
			<figure>
				<figcaption>Ничоси 1</figcaption>			
				<img src = "10.jpg" alt = "ничоси" width = "80" height = "80">
			</figure>
			<figure>
				<figcaption>Ничоси 2</figcaption>
				<img src = "10.jpg" alt = "ничоси" width = "80" height = "80">
			</figure>
		</main>
	</body>
</html>

Результат нашего примера:

Пример использования тега <figcaption>. — Пример использования тега <figcaption>

Значение CSS по умолчанию

figure {
display : block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML теги