Элементы figure и figcaption

Перевод «The figure & figcaption elements»

Редактировать статью на Гитхабе

Ричард Кларк

Перевод Екатерина Мордвина

Редактура Вадим Макеев

В обычных печатных изданиях, таких как книги и журналы, изображения, таблицы или примеры кода обычно сопровождаются подписью. До сих пор у нас не было возможности семантически выделять такой тип содержимого напрямую в 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> может быть также использован для примеров кода:

Creative Commons Attribution Share-alike license

Использование элемента <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> открывает много возможностей. Только не забудьте убедиться, что он подходит для конкретного случая. Хотя вряд ли вы бездумно относитесь к разметке, так ведь?

Ещё