Figure html что это

HTML тег

Тег используется для группирования контента, который дополняет или иллюстрирует содержание документа. В теге могут содержаться изображения, диаграммы, иллюстрации, примеры кодов и т.д.

Содержимое тега относится к основному потоку веб-контента, однако воспринимается как автономная единица.

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

Синтаксис

Содержимое тега пишется между открывающим (

) и закрывающим (

) тегами.

Пример

html> html> head> title>Заголовок документа title> head> body> p>Симпатичный ребенок p> figure> img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200"> figure> body> html>

: Элемент подписи иллюстрации

HTML-элемент или элемент подписи иллюстрации представляет собой подпись (заголовок) или легенду, описывающую остальную часть содержимого родительского элемента .

Интерактивный пример

Категории контента	Нет
Допустимое содержимое	Потоковый контент
Пропуск тегов	Нет, открывающий и закрывающий теги обязательны.
Допустимые родители	Элемент ; элемент должен быть первым или последним потомком.
Допустимые ARIA-роли	group (en-US) , presentation (en-US)
DOM-интерфейс	HTMLElement

Атрибуты

Этот элемент принимает только глобальные атрибуты.

Примеры

Для примеров смотрите .

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

Specification
HTML Standard # the-figcaption-element

Совместимость с браузерами

BCD tables only load in the browser

Элементы figure и figcaption

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

Элемент

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

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

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

Элемент

Элемент был предметом многочисленных споров. В спецификации вначале хотели переориентировать , а не вводить новый элемент. Другие предложения включали , ,

или . . был изменён, затем по предложению Джереми внутри использовали комбинацию и . Большинство этих предложений провалилось, поскольку не было обратной совместимости для управления стилями через CSS.

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

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

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

Элемент не обязателен и добавляется до или после содержимого внутри . Только один может находиться внутри , при этом допустимо добавлять множество других дочерних элементов (например, или ).

Использование и

Мы узнали, что спецификация говорит об этих элементах. Но как их использовать? Давайте взглянем на несколько примеров.

с изображением

Изображение без заголовка внутри элемента .

Детёныш орангутанга держится за верёвку

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

с изображением и заголовком

Изображение внутри элемента с поясняющим заголовком.

Макака на дереве

И код, который мы использовали.

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

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

Кукабурра

с блоком кода

Элемент может также применяться для примеров кода.

Используйте вокруг ссылки Creative Commons license с rel = «license»

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

 <small><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution Share-alike license</a></small>
 Используйте <small> вокруг ссылки Creative Commons license с rel="license"

Различие между и

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

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

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

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

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

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

Резюме

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

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.