Тег <figure>

Автономный контент
  • Категории: Потоковое содержимое, Секционное содержимое
  • Контекст:

    Где ожидается потоковое содержимое.

  • Модель:

    Потоковое содержимое с необязательным элементом <figcaption>.

Тег <figure> (от англ. "figure" - фигура) предназначен для обозначения автономного контента с возможным заголовком <figcaption>. Автономность в данном контексте не обязательно означает независимость. Скорее это единый законченный объект, который дополняет основное содержимое, но не влияет на его поток. Тем самым он может легко быть удален или перемещен в любое место страницы без потери смысла основного содержимого.

Обычно элемент <figure> используется для обозначения визуальных объектов, которые дополняют основную информацию и улучшают ее восприятие:

  • фотография
  • инфографика
  • формулы
  • примеры кода
  • диаграммы
  • схемы
  • и т.д

Чаще всего такие элементы имеют явные или косвенные отсылки из основного потока:

  • на следующей диаграмме
  • смотрите в листинге №1
  • и т.д.

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

  • видео
  • аудио
  • изображения
  • текст
  • любые комбинация перечисленного

Атрибуты

  • Глобальные атрибуты

  • Неявная отсылка

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

    • на изображении ниже
    • на следующей диаграмме
    • и т.д.

    Такие отсылки называются неявными и указывают на примерное местоположение объекта.

  • Подпись

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

  • Явная отсылка

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

  • Ярлыки

    Мы можем улучшить наш пример еще сильнее, оформив явную отсылку в виде ярлыка на соответствующий объект.

  • Содержимое подписи

    Подпись <figcaption> может содержать в себе не только текст, но и любое потоковое содержимое. Используем тег <strong>, чтобы выделить важную часть из шаблона подписи.

  • Листинг кода

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

  • Блок контента

    В <figure> можно обернуть произвольный автономный блок контента, в том числе и цитату, если она является уникальной и дополняет основное содержимое документа. Если же цитата или другой выделенный объект связан с основным содержимым лишь косвенно и служит отдельной цели, либо является повторением контента с целью привлечения внимания читателя и выделения ключевых тем, то для них следует использовать <aside>.

  • Фотогалерея

    Если целью страницы является отображение объекта с подписью, мы также можем использовать <figure> и <figcaption>. Хорошим примером такого использования является фотогалерея, каждая фотография которой представляет из себя полноценный автономный контент с возможным описанием.

  • Вложенные объекты

    Группа элементов <figure> могут быть сгруппированы и объединены в общий родительский объект <figure> с описанием группы.

Поделитесь данной записью с друзьями