<figure>: Элемент иллюстрации с необязательной подписью
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
HTML-элемент <figure> (Иллюстрация с необязательной подписью) представляет самостоятельный контент, часто с подписью (заголовком), которая указывается с помощью элемента (<figcaption>). Диаграмма и её подпись представляет собой единое целое.
Интерактивный пример
<figure> <img src="/shared-assets/images/examples/elephant.jpg" alt="Elephant at sunset" /> <figcaption>An elephant at sunset</figcaption> </figure> figure { border: thin #c0c0c0 solid; display: flex; flex-flow: column; padding: 5px; max-width: 220px; margin: auto; } img { max-width: 220px; max-height: 150px; } figcaption { background-color: #222; color: #fff; font: italic smaller sans-serif; padding: 3px; text-align: center; } | Категории контента | Основной поток, секционный корень, явный контент |
|---|---|
| Допустимое содержимое | Элемент <figcaption> за которым следует основной поток; или поточный контент за которым следует элемент <figcaption>; или поточный контент. |
| Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
| Допустимые родители | Любые элементы принимающие основной поток. |
| Допустимые ARIA-роли | group, presentation |
| DOM-интерфейс | HTMLElement |
Атрибуты
Этот элемент поддерживает только глобальные атрибуты.
Примечания по использованию
- Обычно
<figure>это рисунок, иллюстрация, диаграмма, фрагмент кода, и т.д., на который ссылаются в основном потоке документа, но может быть перенесён в другую часть документа или в приложение не нарушив основной поток. - Являясь секционным корнем, структура содержимого элемента
<figure>исключается из основной структуры документа. - Подпись может быть связана с элементом
<figure>с помощью вставки<figcaption>внутри него (как первый или последний потомок). Первый элемент<figcaption>в иллюстрации предоставляет её подпись (заголовок).
Примеры
Иллюстрации
html
<!-- Just an image --> <figure> <img src="/shared-assets/images/examples/favicon144.png" alt="The beautiful MDN logo." /> </figure> <!-- Image with a caption --> <figure> <img src="/shared-assets/images/examples/favicon144.png" alt="The beautiful MDN logo." /> <figcaption>MDN Logo</figcaption> </figure> Фрагменты кода
html
<figure> <figcaption>Get browser details using <code>navigator</code>.</figcaption> <pre> function NavigatorExample() { var txt; txt = "Browser CodeName: " + navigator.appCodeName + "; "; txt+= "Browser Name: " + navigator.appName + "; "; txt+= "Browser Version: " + navigator.appVersion + "; "; txt+= "Cookies Enabled: " + navigator.cookieEnabled + "; "; txt+= "Platform: " + navigator.platform + "; "; txt+= "User-agent header: " + navigator.userAgent + "; "; console.log("NavigatorExample", txt); } </pre> </figure> Цитирования
html
<figure> <figcaption><cite>Edsger Dijkstra:</cite></figcaption> <blockquote> If debugging is the process of removing software bugs, then programming must be the process of putting them in. </blockquote> </figure> "Если отладка — процесс удаления ошибок, то программирование должно быть процессом их внесения", — Эдсгер Дейкстра.
Стихи
html
<figure> <p style="white-space:pre"> Bid me discourse, I will enchant thine ear, Or like a fairy trip upon the green, Or, like a nymph, with long dishevell'd hair, Dance on the sands, and yet no footing seen: Love is a spirit all compact of fire, Not gross to sink, but light, and will aspire. </p> <figcaption><cite>Venus and Adonis</cite>, by William Shakespeare</figcaption> </figure> Спецификации
| Specification |
|---|
| HTML # the-figure-element |
Совместимость с браузерами
Loading…
Смотрите также
- Элемент
<figcaption>.