Элементы figure и figcaption

Оригинал: http://html5doctor.com/the-figure-figcaption-elements/

Перевод: Влад Мержевич

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

Элемент <figure>

Элемент <figure> используется в сочетании с <figcaption> и предназначен для разметки диаграмм, иллюстраций, фотографий, примеров кода и других вещей. Вот что спецификация говорит о <figure>.

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

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

Элемент <figcaption>

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

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

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

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

Элемент <figcaption> не обязателен и добавляется до или после содержимого внутри <figure>. Только один <figcaption> может находиться внутри <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="http://www.flickr.com/photos/rclark/">Ричард Кларк</a></figcaption>
</figure>

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

Несколько изображений внутри одного <figure> с единым заголовком.

Код.

<figure>
  <img src="/kookaburra.jpg" alt="Кукабурра">
  <img src="/pelican.jpg" alt="Пеликан на пляже">
  <img src="/lorikeet.jpg" alt="Нахально смотрящий многоцветный лорикет">
  <figcaption>Австралийские птицы. Слева направо: кукабурра, пеликан и многоцветный лорикет. 
  Источник: <a href="http://www.flickr.com/photos/rclark/">Ричард Кларк</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>

И код для этого.

<figure>
  <blockquote><p><code>&lt;small&gt;&lt;a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/"&gt;Creative 
   Commons Attribution Share-alike license&lt;/a&gt;&lt;/small&gt;</code></p></blockquote>
  <figcaption>Используйте <code>&lt;small&gt;</code> вокруг ссылки
  <a href="http://creativecommons.org/choose/"title="Choose a License">Creative Commons license</a> 
  с <code>rel="license"</code></figcaption>
</figure>

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

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

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

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

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

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

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

Резюме

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