MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

<figure>

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

HTML-элемент <figure> представляет самостоятельный контент, часто с подписью (<figcaption>), и обычно используется как единое целое.

Категории контента Поточный контент (Flow content), секционный корень (sectioning root), явный контент (palpable content)
Разрешенный контент Элемент <figcaption>, за которым следует поточный контент (flow content); или поточный контент, за которым следует элемент <figcaption>; или поточный контент.
Пропуск тегов None, both the starting and ending tag are mandatory.
Разрешенные родительские элементы Любые элементы, принимающие поточный контент (Flow content).
Разрешенные роли ARIA group, presentation
DOM interface HTMLElement

Атрибуты

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

Примечания

  • Обычно <figure> это рисунок, иллюстрация, диаграмма, отрывок кода, и т.д., который указан в основном потоке документа, но может быть перенесен в другую часть документа или в приложение не нарушив основной поток.
  • Являясь секционным корнем (sectioning root), структура содержимого элемента <figure> исключается из основной структуры документа.
  • Подпись может быть связана с элементом <figure> с помощью вставки <figcaption> внутри него (как первый или последний потомок).

Примеры

Пример 1

<!-- Просто figure -->
<figure>
  <img
  src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
  alt="Классная картинка">
</figure>
<p></p>
<!-- Figure с figcaption -->
<figure>
  <img
  src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
  alt="Классная картинка">	
  <figcaption>Рис1. Логотип MDN</figcaption>
</figure>
<p></p>
MDN Logo
MDN Logo
Рис1. Логотип MDN

Пример 2

<figure>
  <figcaption>Получить информацию о браузере
используя navigator</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;
}            
  </pre>
</figure>
Получить информацию о браузере используя navigator
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;
}

Пример 3

<figure>
  <figcaption><cite
      >Эдсгер Дейкстра :-</cite></figcaption>
  <p>"Если отладка — процесс удаления ошибок,  
  <br />
  то программирование должно быть процессом их внесения"</p>
</figure>
Эдсгер Дейкстра :-

"Если отладка — процесс удаления ошибок,
то программирование должно быть процессом их внесения"

Пример 4

Элемент <figure> может быть использован для форматирования поэмы.

<figure>
 <p>
  Depression is running through my head,<br>
  These thoughts make me think of death,<br>
  A darkness which blanks my mind,<br>
  A walk through the graveyard, what can I find?....
 </p>
 <figcaption><cite>Depression</cite>.
  By: Darren Harris</figcaption>
</figure>

Спецификации

Спецификация Статус Комментарий
WHATWG HTML Living Standard
Определение '<figure>' в этой спецификации.
Живой стандарт  
HTML5
Определение '<figure>' в этой спецификации.
Рекомендация  

Совместимость браузера

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 8 (Да) 4.0 (2.0) 9.0 11.10 5.1
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 3.0 (Да) 4.0 (2.0) 9.0 11.0 5.1 (iOS 5.0)

Смотрите также

Метки документа и участники

 Внесли вклад в эту страницу: r1c0ch3t
 Обновлялась последний раз: r1c0ch3t,