<figure>

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

Атрибуты

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

Примечания

• Обычно <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>

Пример 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>

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>

<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>

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

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

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

• Элемент <figcaption>.