HTML тег <figcaption>html5

HTML теги

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

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

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

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

ТегChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
<figcaption>html56.04.011.15.09.012.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>.

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

Пример использования тега <figure>.
Пример использования тега <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 по умолчанию

figcaption {
display : block;
}

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

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

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

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

HTML теги