Быстрая Подсказка: Возьмите Ваш Код Внутрь Элемента “figure”
Sam B. Last updated Jul 29, 2014
Тег <figure> был представлен HTML5 некоторое время назад, однако вы пока можете не знать, что он делает или как он может быть использован в различных ситуациях. В этом уроке вы узнаете разницу между тегом <figure> и другими аналогичными тегами и то, как вы можете начать его использовать для группировки элементов в вашей разметке.
Этот урок для начинающих, но он также может быть напоминанием для остальных.
Типичное Использование Тега <figure>
Давайте сначала посмотрим, что говорит HTML5 Doctor по этому поводу:
Таким образом, элемент figure определяет отдельное содержимое, как иллюстрации и фотографии. Это означает, что вы всегда будете использовать тег figure для размещения чего-то другого.
Единственное общее заблуждение это то, что figure может быть использован только для изображений. На самом деле он может быть использован для группировки любых элементов, в том числе, но не ограничиваясь этим, изображений, видео, аудио и кодовых блоков.
Определение Структуры Страницы
Элемент figure является секционным корнем, это означает, что он эффективно изолирует свое содержимое от структуры своего предка. Содержимое figure не способствует результату документа. Он ведет себя как структурный элемент страницы и поэтому может содержать в себе свои собственные заголовки, начиная с <h1> и вниз по иерархии <h2> , <h3> и так далее, но это не имеет никакого отношения к иерархии извне:
Иерархия в figure не имеет никакого отношения к результату своего предка.
Такие элементы, как этот используются для введения внешнего содержимового в документе, как цитата, например. <fieldset> другой пример элемента секционного корня.
Изображения
Вот типичный пример того, как тег figure может быть использован для отображения изображения.
Вы, возможно, думаете, «Зачем брать тег «img» в дополнительный элемент?» Это справедливый вопрос, но он начинает иметь смысл как только вы осознаете, что <figure> может содержать в себе более чем один дочерний элемент как подпись.
Есть также тег и для figure caption, или скорее, figcaption . Принимая это во внимание, вы сможете использовать его в следующем порядке.
Многочисленные Изображения
Использование только серии элементов img для отображения изображений вместе работает отлично, хотя каждый отдельный рисунок будет отдельным блоком кода, совершенно не связанным с другими. В случаях, когда изображения имеют какую-то связь друг с другом, на помощь приходит figure . Эти три изображения связаны между собой и совместно используют одно резюме в figcaption .
Использование <figure> для Кодовых Блоков
Талант элемента figure на группировании элементов с общой тематикой не заканчивается. Возможно вы хотите сгруппировать код вместе с подписью, для этого вы можете использовать figure и figcaption следующим образом:
figure может быть использован таким образом вместе с code , pre , и samp , делая группировку кодовых блоков легче.
Подводя Итог
Вот и все! Вы узнали, как использовать элемент figure вместе с figcaption и другие элементы для группировки нескольких элементов вместе. Как вы используете элемент figure на данный момент? Будет ли это изменение в результате прочтения этой Быстрой Подсказки? Расскажите нам в комментариях!
HTML <figure> Tag
Use a <figure> element to mark up a photo in a document, and a <figcaption> element to define a caption for the photo:
More «Try it Yourself» examples below.
Definition and Usage
The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
While the content of the <figure> element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.
Tip: The <figcaption> element is used to add a caption for the <figure> element.
Browser Support
The numbers in the table specify the first browser version that fully supports the element.
HTML figure Tag
Html is used for a lot of tags for highlighting the web sites, and each tag has its own features and specialty of the html predefined elements. The <figure> also one of the html tags is used to block the html elements, and it is used to separate the space area of the user contents on the web page is not affected by other html navigation web pages. Mainly it is used to separate the space on the web page for images, videos, and some user web contents. It is used in most web sites and is used for front end developers to identify the codes’ issues.
Syntax:
Web development, programming languages, Software testing & others
The syntax of the <figure> tag is the same as the html predefined tags it will use, like custom tags.
The above code shows, we use the figure tag in the html document; we will use either the images, videos or animations, etc.; based on the user requirement, we will create and designed the web pages.
How to Use HTML figure Tag?
1. In HTML, the figure tag mainly represents the self-contained focus on the individual html contents, which will be used to create the web sites and more potential with the focus option like caption the images, videos, and animations things in the web sites. These things are focused, and it is used to display in the web pages using <figcaption> html element. The figcaption is used to capture the contents like both text and pictures, video formats are referred with the single unit of the web page documents.
2. The html document based on the user requirement and attractive features we used images, videos, etc. We can also use illustrations, diagrams, flowcharts some code snippet in the web pages; it is also referenced with the main application flow of the html documents it will move into another part of the document in the web pages like indexes, appendix, etc. without affecting the main flow of the html navigations. In the figcaption option, the element will be used for inserting the nodes in the parent-child relationship; the nodes also insert using the first and last child of the document.
3. The element is intended with all conjunctions using markup for all the document areas the html contents is not affected by the main flow of the documents. The position of the html flow contents is independent of the html main workflow. The <figure> tag will accept some specific attributes of the html documents with the default behavior of the html elements. Attributes like “accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, itemid, itemprop, itemref, itemscope, itemtype, lang, spellcheck, style, tabindex, title, translate” these attributes behavior will vary when each of the attributes used in the html documents within the figure tag.
4. The figure tag will also be used for the event handler mechanism for the content attributes; it accepts the specific event handler’s specific attribute. The name of both specific attributes and event handler will be the same. It is most commonly used as the extent of the html element functions and their features. With the help of the specific event attribute contents, it tells the user browsers run with the specific scripts like JavaScript. Generally, JavaScript needs to be inserted within the double-quotes.
5. We have used <aside> tag element for the same as the <figure> element in the HTML, but it has some difference between these two tags. If the html contents are displayed in the web page is used to simply related to the web page, but it is not essential in the web sites we can use the <aside> tag, but the html contents is essential its position of the web page is not considered as the main purpose of the web site we can use the <figure> tag. So based on the user requirement, we can use both tags, which will be more convenient from the user perspectives.
6. If suppose we use the image like banner ads figure tag could not be helpful in that situation we can use the <img> tag as the alternative source in the html predefined tag elements. Usually, the <figcaption> will be optionally in the html documents and web pages it may used in the before or after in the html <figure> tag specifications. Only one <figcaption> element will be used in the inside of the <figure> element; also, it has nested and also some other child tag elements like <img> etc., will be used in multiple times in the <figure> element.
Элементы figure и figcaption
В обычных печатных изданиях, таких как книги и журналы, изображения, таблицы или примеры кода обычно сопровождаются подписью. До сих пор у нас не было возможности семантически выделять такой тип содержимого напрямую в 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> с изображением и подписью Скопировать ссылку
Изображение внутри элемента <figure> с поясняющей подписью:
Наглая макака из Борнео. Фото Ричарда Кларка
И код, который мы использовали:
<figure> с несколькими изображениями Скопировать ссылку
Размещение нескольких изображений внутри одного элемента <figure> с общей подписью:
Слева направо: кукабара, пеликан и многоцветный лорикет. Фотографии Ричарда Кларка
<figure> с блоком кода Скопировать ссылку
Элемент <figure> может быть также использован для примеров кода:
Ниже приведен код для этого:
Различия между <figure> и <aside> Скопировать ссылку
Мы уже говорили об элементе <aside> в предыдущей статье, но важно отметить разницу между ними. При выборе между <aside> или <figure> , стоит спросить себя, имеет ли содержимое элемента важное значение для понимания содержимого:
- Если содержимое просто имеет отношение и не является существенным, то используйте <aside> .
- Если содержимое является важным, но его положение в потоке общего содержимого не так важно, используется элемент <figure> .
Обратите внимание, что если положение содержимого в тексте тесно связано с предыдущим и последующим содержимым, следует использовать более подходящие элементы — например, <div> , старый добрый <img> , <blockquote> , или даже <canvas> , в зависимости от типа содержимого.
Не останавливайтесь на достигнутом! Скопировать ссылку
Не стоит ограничивать использование <figure> изображениями и примерами кода. Другим содержимым, подходящим по смыслу для использования в элементе <figure> может быть аудио, видео, графики (возможно, с использованием <canvas> или <svg> ), стихи или таблицы со статистикой.
Однако использование элемента <figure> не всегда целесообразно. Например, графический баннер не стоит размечать в <figure> . Используйте для этого просто <img> .
Вывод Скопировать ссылку
Как мы продемонстрировали в этой статье, элемент <figure> открывает много возможностей. Только не забудьте убедиться, что он подходит для конкретного случая. Хотя вряд ли вы бездумно относитесь к разметке, так ведь?