Кратко
СкопированоЭлемент <figure>
используется для вёрстки иллюстраций, изображений или другого автономного содержимого, которое может иметь поясняющую подпись в виде тега <figcaption>
.

<figure>
и <figcaption>
.Пример
Скопировано<figure> <img src="elephant-sunset.jpg" alt="Слон на фоне заката"> <figcaption>Слон на фоне заката</figcaption></figure>
<figure> <img src="elephant-sunset.jpg" alt="Слон на фоне заката"> <figcaption>Слон на фоне заката</figcaption> </figure>
Как понять
СкопированоОбычно тегом <figure>
верстают изображение, иллюстрацию, кусок кода и тому подобное, на которые будут ссылаться из основного содержимого документа. При этом <figure>
вместе со всем содержимым (картинкой, подписью) может быть перенесён в другую часть документа без нарушения целостности потока документа.
Как пишется
СкопированоТолько изображение:
<figure> <img src="/favicon144.png" alt="Красивое лого"></figure>
<figure> <img src="/favicon144.png" alt="Красивое лого"> </figure>
Изображение с подписью:
<figure> <img src="/favicon144.png" alt="Красивое лого"> <figcaption>Супер-логотип</figcaption></figure>
<figure> <img src="/favicon144.png" alt="Красивое лого"> <figcaption>Супер-логотип</figcaption> </figure>
Подпись может быть с уточнением:
<figure> <img src="/favicon144.png" alt="Красивое лого"> <figcaption> <p>Новый красивый логотип</p> <p>Автор: Дока Дог</p> </figcaption></figure>
<figure> <img src="/favicon144.png" alt="Красивое лого"> <figcaption> <p>Новый красивый логотип</p> <p>Автор: Дока Дог</p> </figcaption> </figure>
Фрагменты кода:
<figure> <figcaption>Получаем данные о текущем URL из свойства <code>location</code>.</figcaption> <pre> function LocationExample() { console.log(`Protocol: ${location.protocol}`); console.log(`Host: ${location.host}`); console.log(`Path: ${location.pathname}`); console.log(`Hash: ${location.hash}`); } </pre></figure>
<figure> <figcaption>Получаем данные о текущем URL из свойства <code>location</code>.</figcaption> <pre> function LocationExample() { console.log(`Protocol: ${location.protocol}`); console.log(`Host: ${location.host}`); console.log(`Path: ${location.pathname}`); console.log(`Hash: ${location.hash}`); } </pre> </figure>
Подсказки
Скопировано💡 Если содержимое элемента на странице является автономным (даже в отрыве от основного контента будет иметь смысл) и имеет подпись, то почти наверняка можно верстать его тегом <figure>
. Самыми яркими примерами такого содержимого могут быть:
- картинка либо другое медиасодержимое с подписью;
- фрагменты кода с пояснением;
- цитата с указанием автора;
- отрывок стихотворения с указанием автора и т.п.
💡 Разрешено использовать только один тег <figcaption>
внутри <figure>
.
💡 Элемент <figcaption>
, если он есть, обязательно должен быть первым или последним потомком элемента <figure>
.