Элемент figure


Содержание
Илон Маск рекомендует:  Twitter + PHP + Codeigniter пишем twitter статус на PHP

HTML тег figure

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

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

Илон Маск рекомендует:  Структура mpeg аудио файла

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

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

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

HTML пример

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

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

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

Элемент

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

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

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

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

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

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

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

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

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

HTML тег

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

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

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

Синтаксис

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

Атрибуты

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

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

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

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

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

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

Элемент


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

Bootstrap 4 — CSS для HTML элемента figure

В этой статье познакомимся с классами фреймворка Bootstrap 4, предназначенными для добавления базовых CSS стилей к HTML элементу figure.

Назначение HTML элемента figure

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

Обычно контент элемента figure сопровождается текстовой надписью, которая размечается с помощью HTML элемента figcaption .

Классы Bootstrap, добавляющие к элементу figure стили

В Bootstrap 4 имеются стили для базового оформления HTML элемента figure .

В качестве примера рассмотрим элемент figure , состоящий из изображения ( img ) и текстового заголовка ( figure-caption ).

Для применения этих стилей необходимо выполнить следующее:

  • добавить класс figure к html-элементу figure ;
  • добавить класс figure-img к элементу img ;
  • добавить класс figure-caption к элементу figure-caption .

Элемент figure, имеющий базовое оформление:

Во фреймворке Bootstrap 4 изображение , помещённое в HTML-элемент figure , автоматически не становится адаптивным . Поэтому, кроме figure-img к тегу img необходимо добавить ещё класс img-fluid .

HTML код элемента figure , изображение которого имеет скруглённые углы:

Выравнивание текстовой надписи

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

  • text-left (по левому краю);
  • text-center (по центру);
  • text-right (по правому краю).

Например, figure с текстовой надписью, выровненной по правому краю:

Figure с текстовой надписью figcaption , выровненной по центру:

Правильный способ использовать элементы figure и figcaption

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

Элемент figure обычно используется для изображений:

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

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

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

Вы можете поместить несколько тегов img в figure, если они связаны в контексте документа.

Другие элементы, используемые с figure

Использование figure для оборачивания картинок — не единственное его назначение.

Вы можете использовать его для:
— блоков кода
— аудио
— видео или
— рекламных объявлений

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

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


Вы можете вложит один блок figure в другой, если это имеет смысл.

В примере ниже добавлен атрибут role для улучшения семантики.

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

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

Не каждый тег figure нуждается в figcaption.

Тем не менее при использовании figcaption, идеально если он идет первым или последним тегом внутри блока figure:

Вы можете использовать потоковые элементы в figcaption

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

У вас есть еще подсказки по использованию элементов figure и figcaption?

Быстрая Подсказка: Возьмите Ваш Код Внутрь Элемента “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 на данный момент? Будет ли это изменение в результате прочтения этой Быстрой Подсказки? Расскажите нам в комментариях!

Теги figure и figcaption, демонстративный материал

В галерее селфи каждая маленькая картинка-превьюшка ссылается на отдельную страницу с «фотокарточкой». Эта фотокарточка содержит полноразмерное изображение и его описание. Она достаточно независима, и позже мы сможем вставить её на любую другую страницу блога. Как правильно размечать такие «карточки»?

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

Обычно каждый такой материал сопровождает разъясняющий комментарий или «легенда». Для разметки этого комментария предназначен ещё один тег — &ltfigcaption> , который размещается первым или последним элементом внутри . Например:

Давайте с помощью разметим фото в нашей галерее. Приступим.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML Figure Element: Here’s How It Identifies Self-Contained Content

Sharing is caring!

Code Example

fig. 1 A pink flamingo.

Self contained content

The element is new in HTML5, and is one of those elements that the web development community is still just a little unsure of. Here is what the W3C specification says about it:

The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.

Further, it specifies that the contents of the element should be flow content, with an optional caption either before or after the content. In theory, this could be used for several types of things: sidebars, pullquotes, asides, charts, images, secondary media. In practice, the most common use is for captioned images and charts. This makes sense, as “figure” has a meaning in academic and technical writing — an illustration, image, chart, or other visual content, usually captioned, related to the main content but often found separated from it. There is no reason, though, that it couldn’t be used for some of those other purposes.

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

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL