HTML-элемент <figure>
(Иллюстрация с необязательной подписью) представляет самостоятельный контент, часто с подписью (заголовком), которая указывается с помощью элемента (<figcaption>
). Диаграмма и её подпись представляет собой единое целое.
Источник для этого интерактивного пример хранится в GitHub репозитории. Если вы хотите внести свой вклад, ознакомьтесь с https://github.com/mdn/interactive-examples и отправьте нам pull request.
Категории контента | Основной поток, секционный корень, явный контент |
---|---|
Разрешённое содержимое | Элемент <figcaption> за которым следует основной поток; или поточный контент за которым следует элемент <figcaption> ; или поточный контент. |
Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
Разрешённые родители | Любые элементы принимающие основной поток. |
Разрешённые ARIA-роли | group , presentation |
DOM-интерфейс | HTMLElement |
Атрибуты
Этот элемент поддерживает только глобальные атрибуты.
Примечания по использованию
- Обычно
<figure>
это рисунок, иллюстрация, диаграмма, фрагмент кода, и т.д., на который ссылаются в основном потоке документа, но может быть перенесен в другую часть документа или в приложение не нарушив основной поток. - Являясь секционным корнем, структура содержимого элемента
<figure>
исключается из основной структуры документа. - Подпись может быть связана с элементом
<figure>
с помощью вставки<figcaption>
внутри него (как первый или последний потомок). Первый элемент<figcaption>
в иллюстрации предоставляет её подпись (заголовок).
Примеры
Иллюстрации
<!-- Just an image --> <figure> <img src="https://developer.mozilla.org/static/img/favicon144.png" alt="The beautiful MDN logo."> </figure> <!-- Image with a caption --> <figure> <img src="https://developer.mozilla.org/static/img/favicon144.png" alt="The beautiful MDN logo."> <figcaption>MDN Logo</figcaption> </figure>
Фрагменты кода
<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>
Цитирования
<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>
"Если отладка — процесс удаления ошибок, то программирование должно быть процессом их внесения", — Эдсгер Дейкстра.
Стихи
<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>
Спецификации
Спецификация | Статус | Комментарии |
---|---|---|
HTML Living Standard Определение '<figure>' в этой спецификации. |
Живой стандарт | |
HTML 5.2 Определение '<figure>' в этой спецификации. |
Рекомендация | No changes from HTML 5.0. |
HTML5 Определение '<figure>' в этой спецификации. |
Рекомендация |
Поддержка браузерами
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Компьютеры | Мобильные | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
figure | Chrome Полная поддержка 8 | Edge Полная поддержка Да | Firefox Полная поддержка 4 | IE Полная поддержка 9 | Opera Полная поддержка 11 | Safari Полная поддержка 5.1 | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка 11 | Safari iOS Полная поддержка 5.1 | Samsung Internet Android Полная поддержка Да |
Легенда
- Полная поддержка
- Полная поддержка
Смотрите также
- Элемент
<figcaption>
.