Тег figure


Содержание

HTML тег

Элемент (от англ. «figure» ‒ «фигура, рисунок») используется для группирования самодостаточного контента, например, иллюстраций, диаграмм, фотографий, примеров кода и т.д.

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

Примечание: Чтобы добавить подпись для элемента , используется тег .

Синтаксис

Закрывающий тег

Атрибуты

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент со следующими значениями CSS по умолчанию:

Различия между HTML 4.01 и HTML5

Тег является новым в HTML5.

Пример использования:

Элемент

Используем элемент для разметки фотографии:

HTML тег

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

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

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

Синтаксис

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

Тег определяет автономное содержимое, например иллюстрации, диаграммы, фотографии, списки кодов и т.д.

Хотя содержимое элемента связано с основным потоком, его положение не зависит от основного потока, и если оно удалено, оно не должно влиять на поток документа.

Поддержка браузера

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

Элемент
6.0 9.0 4.0 5.0 11.1

Различия между HTML 4,01 и HTML5

Тег является новым в HTML5.

Советы и примечания

Совет: Элемент используется для добавления заголовка для элемента .

HTML тег figure

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

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

Чтобы добавить подпись для элемента , используется тег .

Разница между HTML 4.01 и HTML5

Общие атрибуты

HTML пример

Используем элемент для разметки фотографии:

CSS стили по умолчанию

Большинство браузеров будут отображать тег со следующими стилями

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

Синтаксис

Атрибуты

Закрывающий тег

Пример. Использование тега

Примечание

Internet Explorer до версии 8.0 включительно игнорирует тег , но отображает его содержимое. Также в этом браузере любые стили не применяются к элементу, пока он не создан через скрипт, как показано в примере.

Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.

Браузеры Firefox и Chrome автоматически добавляют к свойство margin со значением 1em 40px .

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

Спецификация Статус
WHATWG HTML Living Standard Живой стандарт
HTML5 Рекомендация

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML ( Living ) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры: Настольные Мобильные ?

Internet Explorer Chrome Opera Safari Firefox
9 5 11.10 5.1 4
Android Firefox Mobile Opera Mobile Safari Mobile
2.2 4 11 5

Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

HTML Tag

The HTML tag represents flow content that is self-contained and is typically referenced as a single unit from the main flow of the document.

The tag can be used for annotating illustrations, diagrams, photos, code listings, etc.

The HTML5 specification advises:

Self-contained in this context does not necessarily mean independent. For example, each sentence in a paragraph is self-contained; an image that is part of a sentence would be inappropriate for figure, but an entire sentence made of images would be fitting.

Syntax

The tag is written as with the caption inserted between the start and end tags.

You can use the element to provide a caption for the contents of a element.

If used, the tag is placed either as the first child or last child of its parent tag.

Examples

Basic tag usage

Here, the tag is used to markup a fragment of sample code. In this instance, the tag is placed as the first child of the element.

Images

You can also use the to markup images. But not just any image. If the image is self-contained, then it is suitable for use within the element. For example, the main image in an image gallery is an ideal candidate for the element. Charts or diagrams are also good candidates for use with the tag, as long as they’re part of the normal flow of the content.

It’s OK to place more than one image into a element, as long as the whole group is self-contained content.

Here’s an example of marking up an image with the tag:

Poetry/Lyrics

Poems and lyrics could also be marked up with the tag. Notice that the element is inside the element.

Attributes

Attributes can be added to an HTML element to provide more information about how the element should appear or behave.

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The element accepts the following attributes.

Element-Specific Attributes

This table shows the attributes that are specific to the tag/element.

Attribute Description
None

Global Attributes

The following attributes are standard across all HTML5 elements. Therefore, you can use these attributes with the tag , as well as with all other HTML tags.

  • accesskey
  • class
  • contenteditable
  • contextmenu
  • dir
  • draggable
  • dropzone
  • hidden
  • id
  • inert
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain «event» occurs. Each event handler content attribute deals with a different event.

Below are the standard HTML5 event handler content attributes.

Again, you can use any of these with the element, as well as any other HTML5 element.

  • onabort
  • oncancel
  • onblur
  • oncanplay
  • oncanplaythrough
  • onchange
  • onclick
  • oncontextmenu
  • ondblclick
  • ondrag
  • ondragend
  • ondragenter
  • ondragexit
  • ondragleave
  • ondragover
  • ondragstart
  • ondrop
  • ondurationchange
  • onemptied
  • onended
  • onerror
  • onfocus
  • onformchange
  • onforminput
  • oninput
  • oninvalid
  • onkeydown
  • onkeypress
  • onkeyup
  • onload
  • onloadeddata
  • onloadedmetadata
  • onloadstart
  • onmousedown
  • onmousemove
  • onmouseout
  • onmouseover
  • onmouseup
  • onmousewheel
  • onpause
  • onplay
  • onplaying
  • onprogress
  • onratechange
  • onreadystatechange
  • onscroll
  • onseeked
  • onseeking
  • onselect
  • onshow
  • onstalled
  • onsubmit
  • onsuspend
  • ontimeupdate
  • onvolumechange
  • onwaiting

For a full explanation of these attributes, see HTML 5 event handler content attributes.

Differences Between HTML 4 & HTML 5

The tag is new in HTML5.

To see more detail on the two versions see HTML5 Tag. Also check out the links to the official specifications below.

Template

Here’s a template for the tag with all available attributes for the tag (based on HTML5). These are grouped into attribute types, each type separated by a space. In many cases, you will probably only need one or two (if any) attributes. Simply remove the attributes you don’t need.

Note that the element does not actually have any local attributes (i.e. attributes that are specific to the element), but the following global attributes and event handlers are available to the element (and all other HTML elements).

For more information on attributes for this tag, see HTML5 Tag.

Tag Details

For more details about the tag, see HTML5 Tag.

Specifications

Here are the official specifications for the element.

What’s the Difference?

W3C creates «snapshot» specifications that don’t change once defined. So the HTML5 specification won’t change once it becomes an official recommendation. WHATWG on the other hand, develops a «living standard» that is updated on a regular basis. In general, you will probably find that the HTML living standard will be more closely aligned to the current W3C draft than to the HTML5 specification.

Использование тега figure для разметки

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

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

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

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

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

Изображения.
Вот пример использования элемента figure для оформления изображений:

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

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

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

Блоки с кодом.
Новый тег хорошо подходит и для группировки блока с кодом и его описанием. Внутри figure можно использовать теги code, pre и samp.

Полезные статьи в сфере веб-разработки и новости студии

Доработки для интернет-магазина керамической плитки Плитка Плюс. Сайт работает на основе 1С-Битр.

Интернет-магазин Fishmarket.pro работает на 1С-Битрикс и запущен в 2015 году. В студии Реймакс в.

Доработка Всероссийского Информационно-Аналитического издания «ТЕХНОmagazine». Нами выпол.

20 HTML & with CSS

Collection of free HTML and CSS & code examples (with little JS). Update of September 2020 collection. 2 new items.

Author

  • Kyle Foster
  • April 28, 2020

Made with

About the code

Realistic Polaroid Figures

Realistic polaroid figures in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Joshua Ward
  • January 17, 2020

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

A figure with a figcaption

A figure with a figcaption . and .date that all:hovers.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Tobias Glaus
  • July 23, 2020

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code


Figure & Figcaption

Image with caption using HTML figure and figcaption tags.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Booligoosh
  • June 25, 2020

Made with

About the code

Parallax image gallery using figure & figcaption tags.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • miazura
  • June 25, 2020

Made with

  • HTML / CSS (SCSS) / JavaScript (Babel)

About the code

Figure & Figcaption with CSS

figure & figcaption using CSS flexbox and some simple styling.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Yanely Ramirez
  • June 24, 2020

Made with

  • HTML / CSS (SCSS)

About the code

HTML Figure & Figcaption

Simple example of thumbnails using HTML figure & figcaption tags and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Piotr Galor
  • June 23, 2020

Made with

About the code

Playful CSS Figure & Figcaption

Pure CSS, no libs and stuff.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Brett Thurston
  • June 22, 2020

Made with

  • HTML / CSS / JavaScript

About the code

Use Alt Tags in IMG Captions

Example of how to use alt to print to your img captions. Handy for SEO purposes. Credit to Josh Emrich for his Campy Creature Invader artwork. And JavaScript by CodeJoust on StackExchange.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • parph
  • June 22, 2020

Made with

  • HTML (Haml) / CSS (Sass)

About the code

HTML Figure & Figcaption

Minimalistic pure CSS carousel with HTML figure and figcaption .

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Guillaume
  • June 22, 2020

Made with

About the code

Figure & Caption

Animated image thumbnail.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Stephen Lee
  • June 22, 2020

Made with

  • HTML / CSS (SCSS)

About the code

Responsive Image Labels

Using figcaption to add multiple labels to an image. By changing a CSS variable with media queries, the labels can adjust to a wide variety of screen sizes.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • ycw
  • June 20, 2020

Made with

  • HTML (Pug) / CSS / JavaScript

About the code

Interactive Inky

figcaption text segments as legends pointing out portion of figure content.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Artem
  • June 20, 2020

Made with

  • HTML (Haml) / CSS (Sass)

About the code

Figure & Figcaption with CSS Hover Effect

Image hover transition with CSS variables.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

  • Isman Fromes
  • June 20, 2020

Made with

  • HTML (Pug) / CSS (Less) / JavaScript

About the code

Playful Figure/Figcaption

A try to a more playful figure/figcaption.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js, TweenMax.js

Author

  • CГЎtia Campos
  • June 20, 2020

Made with

About the code

Picture Cards — Figure & Figcaption

Image cards (polaroid style) with description on the back. Hover over the images to see the effect. HTML & CSS.

Compatible browsers: Chrome, Edge, Opera, Safari

Author

  • Ryan Mulligan
  • June 20, 2020

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Figure + Figcaption

My faux trip as told through figures and figcaptions.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Jon Wilcox
  • June 20, 2020

Made with

  • HTML / CSS (Less) / JavaScript

About the code

Interactive Pile O’ Polaroids

Toss the photos around or click for a larger version. Photos and captions (authors) are a random selection from «Lorem Picsum». «GreenSock Draggable» for the interaction.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js, draggable.js, ThrowPropsPlugin.js, TweenLite.js, CSSPlugin.js

Author

  • Elise
  • June 19, 2020

Made with

About the code

Figure & Figcaption Tags

figure and figcaption . and a beautifull David Harris’s poem.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Alex Paul
  • June 18, 2020

Made with

  • HTML / CSS / JavaScript

About the code

Lazy Loading Figure + Figcaption & Flipping Card

figure & figcaption combo with some extra features in the form of a short description added on hover of the caption and the back side of the figure for a full description. Can be used in a portfolio to showcase both the work and an extensive description in a relatively small space.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Быстрая Подсказка: Возьмите Ваш Код Внутрь Элемента “figure”

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

Этот урок для начинающих, но он также может быть напоминанием для остальных.

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

Давайте сначала посмотрим, что говорит HTML5 Doctor по этому поводу:

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

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

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

Определение Структуры Страницы

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

и вниз по иерархии

и так далее, но это не имеет никакого отношения к иерархии извне:

Иерархия в figure не имеет никакого отношения к результату своего предка.

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

Изображения

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

Вы, возможно, думаете, «Зачем брать тег «img» в дополнительный элемент?» Это справедливый вопрос, но он начинает иметь смысл как только вы осознаете, что может содержать в себе более чем один дочерний элемент как подпись.

Есть также тег и для figure caption, или скорее, figcaption . Принимая это во внимание, вы сможете использовать его в следующем порядке.

Многочисленные Изображения

Использование только серии элементов img для отображения изображений вместе работает отлично, хотя каждый отдельный рисунок будет отдельным блоком кода, совершенно не связанным с другими. В случаях, когда изображения имеют какую-то связь друг с другом, на помощь приходит figure . Эти три изображения связаны между собой и совместно используют одно резюме в figcaption .

Использование для Кодовых Блоков

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

figure может быть использован таким образом вместе с code , pre , и samp , делая группировку кодовых блоков легче.

Подводя Итог

Вот и все! Вы узнали, как использовать элемент figure вместе с figcaption и другие элементы для группировки нескольких элементов вместе. Как вы используете элемент figure на данный момент? Будет ли это изменение в результате прочтения этой Быстрой Подсказки? Расскажите нам в комментариях!

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

Синтаксис

Атрибуты

Закрывающий тег

Пример. Использование тега

HTML 5 IE 7 IE 8 IE 9 Cr 12 Op 11 Sa 5 Fx 5

Результат данного примера показан на рис. 1.

Рис. 1. Использование тега

Браузеры

Internet Explorer до версии 8.0 включительно игнорирует тег , но отображает его содержимое. Также в этом браузере любые стили не применяются к элементу, пока он не создан через скрипт, как показано в примере.

Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.

Илон Маск рекомендует:  Sqrt - Функция Delphi
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL