<figcaption>¶
Тег <figcaption>
(от англ. figure caption - подпись к рисунку) содержит описание для элемента <figure>
.
<figcaption>
должен быть первым или последним элементом в группе.
Изображения и мультимедиа
Синтаксис¶
<figure>
<figcaption>Описание</figcaption>
</figure>
Закрывающий тег обязателен.
Атрибуты¶
Нет.
Спецификации¶
Описание и примеры¶
Пример 1¶
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FIGCAPTION</title>
<style>
figure {
background: #d9dabb; /* Цвет фона */
display: block; /* Блочный элемент */
width: 150px; /* Ширина */
height: 190px; /* Высота */
float: left; /* Блоки выстраиваются по горизонтали */
margin: 0 10px 10px 0; /* Отступы */
text-align: center; /* Выравнивание по центру */
}
figure img {
border: 2px solid #8b8e4b; /* Параметры рамки */
}
figure p {
margin-bottom: 0; /* Отступ снизу */
}
</style>
</head>
<body>
<article>
<figure>
<p><img src="image/thumb3.jpg" alt="" /></p>
<figcaption>Купеческий клуб</figcaption>
</figure>
<figure>
<p><img src="image/thumb4.jpg" alt="" /></p>
<figcaption>Памятник Св. Владимиру</figcaption>
</figure>
</article>
</body>
</html>
Пример 2¶
<!-- Just a figure -->
<figure>
<img
src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
alt="An awesome picture"
/>
</figure>
<p></p>
<!-- Figure with figcaption -->
<figure>
<img
src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
alt="An awesome picture"
/>
<figcaption>Fig1. MDN Logo</figcaption>
</figure>
<p></p>
Ссылки¶
- Тег
<figcaption>
MDN (рус.)