Совет: как правильно использовать тег figure и тег figcaption

Совет: как правильно использовать тег figure и тег figcaption

От автора: семантические теги figure и figcaption часто используются в паре. Если вы до сих пор не читали документацию по этим тегам, уже пользовались ими в проектах или понятия не имеете, зачем они нужны, в этой статье я привел несколько советов, которые помогут вам правильно применять эти элементы.

Тег figure обычно используется для вставки изображений:

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Несколько изображений в теге figure

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

Figure можно использовать и с другими тегами

Тег figure не ограничивается только лишь изображениями. Его можно использовать с:

Блоками для кода,

Видео,

Аудиофайлами или

Рекламой.

Пример вставки блока с кодом в тег figure:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Вложенность одного figure в другой

Тег figure можно поместить внутрь другого тега figure. В коде ниже для улучшения семантики был добавлен ARIA атрибут role.

Правильное применение figcaption

Тег figcaption представляет собой подпись или легенду к тегу figure. Не всегда тегу figure нужен figcaption. Однако в случаях, когда этот тег необходим, он должен быть первым или последним внутри figure:

Или:

Если нужно добавить больше семантики изображению, можно использовать теги h1 и p.

А вы знаете, как еще можно использовать теги figure и figcaption?

Автор: Georgie Luhur

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (2)

  1. Егоров павел юрьевич

    Англиский зык надо учить или нет?

  2. Егоров павел юрьевич

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree