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

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

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

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

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

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

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

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

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

Видео,

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

Рекламой.

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

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

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

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

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

Или:

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

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

Автор: Georgie Luhur

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

PSD to HTML

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

Смотреть

Метки:

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

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

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

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

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

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

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

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

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