<figure>: Элемент иллюстрации с необязательной подписью
=======================================================

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

Интерактивный пример
--------------------

| Категории контента | Основной поток, секционный корень, явный контент |
| --- | --- |
| Допустимое содержимое | Элемент `<figcaption>` за которым следует основной поток; или поточный контент за которым следует элемент `<figcaption>`; или поточный контент. |
| Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
| Допустимые родители | Любые элементы принимающие основной поток. |
| Допустимые ARIA-роли | `group (en-US)`, `presentation (en-US)` |
| DOM-интерфейс | `HTMLElement` |

Атрибуты
--------

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

Примечания по использованию
---------------------------

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

### Иллюстрации


```html
<!-- 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>
```

### Фрагменты кода


```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 Standard # the-figure-element |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Элемент `<figcaption>`.