HTML-тег <figure>
Тег <figure> содержит изображения, диаграммы, иллюстрации и т.д. Описание тега, атрибуты и примеры.
Тег <figure> отмечает самодостаточный контент — единицу, на которую ссылается основной поток документа, но которая является законченной сама по себе. Чаще всего он содержит изображение, но также может оборачивать диаграмму, иллюстрацию, фрагмент кода, цитату или таблицу.
Тег <figure> — один из элементов HTML5.
Что означает «самодостаточный контент»
Контент считается «самодостаточным», если его можно переместить в другое место — на боковую панель, в приложение или на следующую страницу — не нарушая смысла окружающего текста. В теле документа может быть написано «см. рисунок ниже», но сам рисунок не обязан находиться именно в этом месте, чтобы оставаться понятным.
Именно это является главной причиной выбора <figure> вместо простого <img>:
- Семантика, а не только вёрстка.
<figure>сообщает браузеру и вспомогательным технологиям «это самостоятельная, связанная ссылкой иллюстрация», тогда как обычный<img>— просто строчное изображение в тексте. - Группировка контента с подписью.
<figure>связывает изображение (или код, или цитату) с его описанием, так что они перемещаются вместе как один логический блок. - Обработка программами чтения с экрана. Многие программы чтения с экрана объявляют
<figure>как отдельный регион рисунка и читают<figcaption>как метку рисунка, поэтому пользователи слышат пояснение, напрямую связанное с визуальным содержимым.
Если изображение носит исключительно декоративный характер или встроено в строку как часть предложения, вполне достаточно обычного <img> — используйте <figure>, когда контент представляет собой самостоятельную единицу с подписью и ссылкой на неё.
Добавление подписи с помощью <figcaption>
Чтобы подписать или пояснить рисунок, вложите элемент <figcaption> внутрь <figure>. Он должен быть первым или последним дочерним элементом <figure> — первым, если подпись отображается над содержимым, последним — если под ним.
Элемент <figure> может содержать не более одного <figcaption>.
Синтаксис
Тег <figure> используется парами. Содержимое записывается между открывающим (<figure>) и закрывающим (</figure>) тегами.
Пример: <figure> с <figcaption>
Это наиболее распространённый вариант использования — изображение в паре с подписью:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The Eiffel Tower at sunset (see Figure 1).</p>
<figure>
<img
src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg"
alt="The Eiffel Tower silhouetted against an orange sky"
width="250"
height="200"
/>
<figcaption>Figure 1. The Eiffel Tower at sunset.</figcaption>
</figure>
</body>
</html>Пример: фрагмент кода
<figure> отлично подходит как обёртка для упоминаемого примера кода. Подпись может давать название листингу:
<figure>
<figcaption>Listing 1. A minimal HTML page.</figcaption>
<pre><code><!DOCTYPE html>
<html>
<head><title>Hello</title></head>
<body>Hello, world!</body>
</html></code></pre>
</figure>Подробнее о форматировании кода — в <pre> и <code>.
Пример: цитата
Выделенная цитата, на которую есть ссылка в тексте, может быть оформлена как рисунок — с источником в подписи:
<figure>
<blockquote>
<p>The only way to do great work is to love what you do.</p>
</blockquote>
<figcaption>— Steve Jobs</figcaption>
</figure>Подробнее об оформлении цитат — в <blockquote>.
Пример: таблица
Табличные данные, на которые ссылаются как на рисунок, также можно обернуть в этот тег:
<figure>
<figcaption>Table 1. Browser market share.</figcaption>
<table>
<tr><th>Browser</th><th>Share</th></tr>
<tr><td>Chrome</td><td>65%</td></tr>
<tr><td>Safari</td><td>19%</td></tr>
</table>
</figure>Подробнее о построении таблиц — в <table>.
Разница между <figure> и <aside>
Оба элемента группируют связанный контент, но отвечают на разные вопросы.
<figure>содержит контент, который является частью основного потока — документ ссылается на него («как показано на рисунке 1»). Удаление такого контента оставит висящую ссылку. Используйте его для изображений, диаграмм, листингов кода и цитат, на которые указывает текст.<aside>содержит второстепенный контент — боковые панели, связанные ссылки, выделенные цитаты или рекламные блоки. Основной текст читается без потери смысла даже при удалении aside, поскольку в теле документа на него нет ни одной ссылки.
Конкретный пример: диаграмма с подписью «Рисунок 2: жизненный цикл запроса», которую обсуждает статья, — это <figure>. Блок «Связанные статьи» рядом с тем же абзацем — это <aside>.
Доступность
<figure>имеет неявную роль ARIAfigure; добавлятьrole="figure"вручную не нужно.- При наличии видимый
<figcaption>выступает в роли доступного имени (метки) рисунка, поэтому пользователи программ чтения с экрана получают пояснение, связанное с контентом. Отдавайте предпочтение настоящему<figcaption>передaria-label, чтобы зрячие и незрячие пользователи видели один и тот же текст. - Для изображений атрибут
altтега<img>и<figcaption>служат разным целям:altописывает картинку для пользователей, которые её не видят, тогда как подпись добавляет контекст для всех. Избегайте дословного повторения одного и того же текста в обоих местах.
Атрибуты
Тег <figure> поддерживает глобальные атрибуты и атрибуты событий.