Элементы figure и figcaption

Ричард Кларк 12 марта 2012

В обычных печатных изданиях, таких как книги и журналы, изображения, таблицы или примеры кода обычно сопровождаются подписью. До сих пор у нас не было возможности семантически выделять такой тип содержимого напрямую в HTML, вместо того чтобы прибегать к именам классов СSS. HTML5 надеется исправить эту проблему с помощью новых элементов: <figure> и <figcaption>. Давайте разберемся!

Элемент <figure>

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

Элемент <figure> представляет собой фрагмент независимого содержимого, совсем необязательно с подписью, который как правило относится к отдельному элементу из основного содержимого документа, и может быть удалён из документа без ущерба его смыслу.

— Спецификация W3C

Элемент <figcaption>

Этот элемент стал поводом серьезных споров. Спецификация изначально предлагала приспособить для этих целей элемент <legend>, вместо того, чтобы придумывать новый элемент. Были и другие предложения, включавшие <label>, <caption>, <p> и даже заголовки <h1><h6>. Семантика элемента <legend> изменилась, и поэтому мы начали использовать комбинацию <dt> и <dd> внутри <figure> по предложению Джереми. Но большинство этих идей были отклонены из-за отсутствия обратной совместимости для CSS-оформления.

Наши постоянные читатели знают, что недавно был представлен новый элемент <figcaption>. Кто знает, приживется ли он, а пока давайте узнаем, что о нём говорит спецификация:

Элемент <figcaption> представляет собой заголовок или описание для <figure>.

— Спецификация W3C

Элемент <figcaption> является необязательным и может появляться до или после содержимого внутри <figure>. Только один элемент <figcaption> может быть помещен в <figure>, хотя сам элемент <figure> может содержать несколько дочерних элементов (например, <img> или <code>).

Использование <figure> и <figcaption>

Итак, мы узнали, что об этих элементах говорится в спецификации. Как же их использовать? Давайте рассмотрим это на примерах.

<figure> для изображения

Изображение в элементе <figure> без подписи:

Малыш орангутанга свисает с каната

Вот код для этого:

	<figure>
	    <img src="orang-utan.jpg"
	         alt="Малыш орангутанга свисает с каната">
	</figure>

<figure> с изображением и подписью

Изображение внутри элемента <figure> с поясняющей подписью:

Макака на дереве
Наглая макака из Борнео. Фото Ричарда Кларка

И код, который мы использовали:

	<figure>
	    <img src="macaque.jpg" alt="Макака на дереве">
	    <figcaption>
	        Наглая макака из Борнео.
	        Фото <a href="…">Ричарда Кларка</a>
	    </figcaption>
	</figure>

<figure> с несколькими изображениями

Размещение нескольких изображений внутри одного элемента <figure> с общей подписью:

Кукабара Пеликан на пляже Наглый многоцветный лорикет
Слева направо: кукабара, пеликан и многоцветный лорикет. Фотографии Ричарда Кларка

И сам код:

	<figure>
	    <img src="kookaburra.jpg" alt="Кукабара">
	    <img src="pelican.jpg" alt="Пеликан на пляже">
	    <img src="lorikeet.jpg" alt="Наглый многоцветный лорикет">
	    <figcaption>
	        Слева направо: кукабара, пеликан и многоцветный лорикет.
	        Фотографии <a href="…">Ричарда Кларка</a>
	    </figcaption>
	</figure>

<figure> с блоком кода

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

<small><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution Share-alike license</a></small>

Использование элемента <small> вокруг ссылки на лицензию Creative Commons с rel="license".

Ниже приведен код для этого:

	<figure>
	    <blockquote>
	        <p><code><small>
	            <a rel="license" href="…">
	                Creative Commons Attribution Share-alike license
	            </a>
	        </small></code></p>
	    </blockquote>
	    <figcaption>
	        Использование элемента <code>&lt;small&gt;</code>
	        вокруг ссылки на лицензию Creative Commons
	        с <code>rel="license"</code>.
	    </figcaption>
	</figure>

Различия между <figure> и <aside>

Мы уже говорили об элементе <aside> в предыдущей статье, но важно отметить разницу между ними. При выборе между <aside> или <figure>, стоит спросить себя, имеет ли содержимое элемента важное значение для понимания содержимого:

  • Если содержимое просто имеет отношение и не является существенным, то используйте <aside>.
  • Если содержимое является важным, но его положение в потоке общего содержимого не так важно, используется элемент <figure>.

Обратите внимание, что если положение содержимого в тексте тесно связано с предыдущим и последующим содержимым, следует использовать более подходящие элементы — например, <div>, старый добрый <img>, <blockquote>, или даже <canvas>, в зависимости от типа содержимого.

Не останавливайтесь на достигнутом!

Не стоит ограничивать использование <figure> изображениями и примерами кода. Другим содержимым, подходящим по смыслу для использования в элементе <figure> может быть аудио, видео, графики (возможно, с использованием <canvas> или <svg>), стихи или таблицы со статистикой.

Однако использование элемента <figure> не всегда целесообразно. Например, графический баннер не стоит размечать в <figure>. Используйте для этого просто <img>.

Вывод

Как мы продемонстрировали в этой статье, элемент <figure> открывает много возможностей. Только не забудьте убедиться, что он подходходит для конкретного случая. Хотя вряд ли вы бездумно относитесь к разметке, так ведь?

Перевод оригинальной статьи «The figure & figcaption elements» Ричарда Кларка (Richard Clark), опубликованной на сайте HTML5Doctor.com.

Перевод выполнила Екатерина Мордвина.

Теги: , ,

Комментарии +

  1. Anton Diaz 12 марта 2012 в 20:13

    Элемент <figure> представляет собой фрагмент независимого содержимого, совсем необязательно с подписью, который как правило относится к отдельному элементу из основного содержимого документа, и может быть удалён из документа без ущерба его смыслу.

    Определение ужасно расстраивает своей неотносимостью к тому, для чего его придумали. Возьмем хрестоматийный пример использования <figure> — иллюстрация к статье. Ну вот как она может быть удалена из документа без ущерба его смыслу, если это часть контента? Это не фоновые изображения кавычек в <blockquote> и не пиктограмма к блокам с предупреждениями, это содержимое. К вышеназванному определению больше бы подошел баннер с таргетированной рекламой: к контенту оно относится, но в общем и целом это элемент чужеродный и отрывается из содержимого (либо заменяется) безболезненно.

    Если содержимое является важным, но его положение в потоке общего содержимого не так важно, используется элемент <figure>

    Почему же вы написали, что блок с кодом вполне может быть помещен в этот элемент, если его положение на странице имеет значение? Если в вашей статье поменять блоки с кодом местами, разве от этого не вызовет путаницу?

  2. Вадим Макеев 12 марта 2012 в 20:24

    Антон, я полностью согласен с тем, что описание этих элементов можно было сделать ещё точнее и прозрачнее. Но в качестве стартовой информации для понимания текст вполне хорош. Разница между блоком кода и блоком кода в <figure> состоит в том, что, первый является содержимым, т.е. предваряется фразой «ну вот как здесь…» а второй может быть упомянут в любом месте статьи, например «вот бывают и такие штуки, но мы сейчас не об этом». А подпись «вот бывают и такие штуки». Тонко, не всегда понятно — но явно заслуживает отдельной логической единицы, как по мне. Плюс сильно пересекается с типографской традицией, где в такие <figure> помещают цитаты (вот прям дубликаты) из текста, картинки и подобное содержимое, которое не нужно читать в потоке текста, а нужно рассматривать до, после или в перерывах между чтением.

  3. Anton Diaz 12 марта 2012 в 20:58

    Вадим, сходу я могу вспомнить только один конкретный (то есть реально увиденный в Вебе) пример, где тег с такой семантикой был бы уместен — блоки «Хозяйке на заметку» в Ководстве Лебедева.

    На мой взгляд, явно относимый к тексту иллюстративный материал гораздо больше заслуживает своего отдельного семантически выделенного тега. А такой &ltfigure> притянут в HTML за уши, если даже не за усы.

  4. SelenIT 12 марта 2012 в 21:40

    Господа, предлагаю начать с того, чтобы обратиться к актуальным спецификациям;)
    WHATWG:

    Элемент figure представляет некое потоковое содержимое, с необязательным заголовком, являющееся самостоятельным (self-contained) и на которое, как правило, можно сослаться из основного потока документа как на единое целое.

    Таким образом, этот элемент может использоваться для объявления иллюстраций, диаграмм, листингов кода и т.п., на которые ссылаются из основного содержимого документа, но которые могут, без ущерба для потока документа, быть вынесены из основного контента, например, на поля страницы, на отдельную страницу или в приложение.

    Имхо, всё логично: если в статье одна иллюстрация и один пример кода, в ней может быть написано "см. рис." и "см. код" — и никакой путаницы не будет, все поймут всё правильно, даже если рисунок и код будут без каких-либо подписей приведены в конце страницы. А если их несколько, то элементарная логика здравого смысла требует подписать их "fig. 1", "Рис. 2" и т.п. — и опять же, путаница будет минимальной, даже если пьяная секретарша переставить пару этих "fig-чего-то-там" местами. А что не так?

  5. SelenIT 12 марта 2012 в 21:42

    И в последней рабочей версии спецификации W3C вроде бы всё так же, как у WHATWG...

  6. SelenIT 12 марта 2012 в 21:50

    А "Хозяйке на заметку", по-моему, едва ли не ближе к aside (уровня статьи), чем к figure: на них ведь никто ниоткуда не ссылается, они просто именно что "касательно связаны" с основной темой, немножко "оживляя" чтение (этакая "музыкальная пауза").

    P.S. Прошу извинить за нелепую опечатку в первом комменте)

  7. Anton Diaz 13 марта 2012 в 0:32

    SelenIT, ну раз так, то это уже совсем другое дело :) В таком случае, figure — это именно то, что мне бы и хотелось, а сабжевая статья (вернее, ее перевод) уже устарела к моменту публикации.

    И раз так, то «Хозяйке на заметку» — это действительно будет не figure, а вполне «полноправный» aside без всяких опасений:

    The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

    The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.

    P.S. Спасибо, что внес ясность.

  8. SelenIT 13 марта 2012 в 19:47

    Кстати, по поводу последнего примера с кодом в blockquote подумалось: а не годится ли figure вообще для внешних цитат с подписью — саму blockquote внутрь, а подпись в figcaption (тем самым решив давнюю проблему, куда девать автора/источник цитаты — по смыслу они снаружи blockquote, но оформлять часто приходится как единое целое с ней)? Вроде, такая связка вполне себе "self-contained"... Или это за гранью допустимого (и почему, если так)?

  9. Олег 31 марта 2012 в 17:11

    Вадим Макеев
    А вы будите продолжать писать статьи о семантике?
    Если да то когда планируете? А то уже давненько ничего не было.

  10. Вадим Макеев 7 апреля 2012 в 23:36

    Олег, будем продолжать, в самое ближайшее время.

  11. SelenIT 12 апреля 2012 в 3:06

    Раз на мой поставленный ответ© чуть выше никто не отвечает, отвечу сам: цитата в figure с ее источником в figcaption — не только разрешенная, но даже рекомендуемая практика (хотя не всем она по душе). О как!

  12. dnzl 5 сентября 2012 в 11:42

    Хорошо, конечно, но , похоже, они уже сами не знают какие теги и для чего выпускают

  13. Вадим Макеев 5 сентября 2012 в 11:55

    Dnzl, честнее было бы написать «я ничего не понял», а не «они сами не знают».

  14. Евгений Дмитриев 27 октября 2013 в 23:57

    Мучаюсь уже не впервые над таким вопросом. Насколько уместно использовать и в галереях, содержащих изображения с подписями?
    Может быть, подскажете более уместный вариант разметки для такого случая:

    Как было бы раньше:

    
    <ul class="gallery">
        <li>
            <a href="#"><img src="pic1.jpg" alt=""></a>
            <span class="caption">Первая картинка</span>
        </li>
        <li>
            <a href="#"><img src="pic2.jpg" alt=""></a>
            <span class="caption">Вторая картинка</span>
        </li>
    </ul>
    
    

    Вариант с figure (появляется, казалось бы, лишний уровень разметки):

    
    <ul class="gallery">
        <li>
            <figure>
                <a href="#"><img src="pic1.jpg" alt=""></a>
                <figcaption>Первая картинка</figcaption>
            </figure>
        </li>
        <li>
            <figure>
                <a href="#"><img src="pic1.jpg" alt=""></a>
                <figcaption>Вторая картинка</figcaption>
            </figure>
        </li>
    </ul>
    
    

    Насколько такой вариант оправдан и семантичен?

  15. Евгений Дмитриев 27 октября 2013 в 23:58

    Я имел в виду следующее:
    Насколько уместно использовать figure и figcaption в галереях, содержащих изображения с подписями?

  16. Владимир Кузнецов 14 июня 2014 в 8:35

    Позвольте вынести на обсуждение ещё один интересный пример:

    <figure>
        <img src="image.jpg" alt="Макака на дереве">
        <figcaption>
            <h2>Макака на дереве</h2>
            <p>Фото <a href="…">Ричарда Кларка</a></p>
        </figcaption>
    </figure>

    По спецификации внутри <figcaption> может быть любой поточный контент. Но валидатор ругается на <h2>, а аутлайнеры полностью игнорируют эти заголовки.

    Кто-нибудь знает причину такого поведения?

  17. SelenIT 14 июня 2014 в 19:18

    Вероятно, ответ на вторую часть вопроса — то, что <figure> относится к т.н. «sectioning roots» (w3c, whatwg), секции внутри которых не учитываются в «outline» предка. Косвенно это подтверждается тем, что заголовок в табличке тоже не учитывается аутлайнером.

    А вот почему заголовок внутри <figcaption> вызывает предупреждение «пустой заголовок» — подозреваю, что это баг валидатора. Поскольку это не ошибка, и общий результат проверки — всё-таки «Valid», думаю, этим предупреждением можно пренебречь.

  18. Владимир Кузнецов 14 июня 2014 в 19:42

    Спасибо! Про «section roots» я не подумал.

    Не уверен, что мы имеем дело с багом валидатора. Получается как бы один заголовок вложен в другой. На другие элементы он же не ругается.

  19. SelenIT 14 июня 2014 в 20:22

    По моим наблюдениям, ругается именно на заголовок внутри <figure>, неважно, в <figcaption> или в теле фигуры. Так что дело не во «вложенности заголовка», а именно с влиянием <figure>. Поскольку текст предупреждения явно неадекватен ситуации (даже если заголовок находится в неположенном месте, он всё-таки не пуст), первая мысль именно о баге.

    Нашел тему на форуме с похожим вопросом, где верно подмечено, что заголовок в <figcaption> по текущей логике аутлайнера будет считаться заголовком всей фигуры, а не только ее подписи. Но подтверждений формального запрета такого кода нет и там. На данный момент html5.validator.nu валидирует <figure> с заголовками без ошибок и предупреждений (хотя буквально час назад там наблюдалось то же самое предупреждение — парадокс:).

  20. Ксения 8 декабря 2015 в 10:18

    Подскажите можно стилизовать просто пустой ?
    Вот такой код будет правильный?

    
         <figure class="wb-box box1">
              <figcaption>Возраст</figcaption>
         </figure>
    
    

    figure будет стилизован в виде круга с надписью внутри.

Перейти к началу