Figure тег что это
Примеры использования html-тегов figure и figcaption
HTML-теги figure и figcaption появились в стандарте HTML5 для формирования блока с картинкой и описания к ней. Кроме того, эти теги можно применять для оборачивания блоков кода, рекламы, видео или аудио.
Стандартный вид использования этих тегов таков:
Поэтому мы можем несколько изменить форматирование нашего блока, определив дополнительные ccs-правила для тегов и :
После этого получим уже другой вид той же картинки. Стало намного симпатичней, не так ли?
Эффект увеличения картинки при наведении на figure
Сам пример с увеличивающейся картинкой и появляющимся описанием выглядит так:
Пример использования тегов figure и figcaption для форматирования элементов code и pre
Кроме применения этих тегов в качестве обертки для картинок, можно использовать их для:
— блочных цитат
— блоков кода
— аудио
— видео
— рекламных объявлений
Рассмотрим пример, который демонстрирует код на JavaScript (используются теги Пример кода на JavaScript для обработки события клика на кнопку и случайного изменения цвета фона для body
Примеры форматирования изображений с помощью html-тегов figure и figcaption с Codepen
Пример очень симпатичного оформления профиля актера, автора статьи или пользователя
Описание изображения в виде меток
Простая фотогалерея с описаниями
Пример форматирования галереи изображений
Фотогалерея с данными об авторе, просмотрах и загрузках
Пример мини-слайдера
Фотогалерея с перемещением картинок
Фотогалерея на основе Grid
В этой фотогалерее интересно размещение разных по размеру фото по сетке за счет использования модели Grid. Также здесь использован hover-эффект с всплывающим описанием, немного повернутым за счет использования свойства transform: rotate().
See the Pen Figure + Figcaption by Ryan Mulligan (@hexagoncircle) on CodePen.18892
Слайдер на основе тегов figure и figcaption
Мини-фотогалерея с эффектом печатания текста
Пример, демонстрирующий изменение контента при наведении на фото
Пример изображения с выезжающим описанием
При клике на кнопку More описание, размещенное в коде в теге выезжает вверх. В примере использован svg с фильтром и немного JS-кода на основе jQuery.
Описание на обороте изображения
В этом примере для того, чтобы прочитать полное описание фото, необходимо нажать на кнопку Read the back, после чего фото повернется к нам своей «обратной стороной». В коде использованы 3D трансформации и JavaScript.
Описание, появляющееся при наведении курсора мыши на фото
Анимированное исчезновение описания картинки
Исчезающее описание
Еще один вариант кода, который не показывает, а наоборот, убирает figcaption для изображения. Очень приятный hover-эффект, в котором при наведении курсора мыши на картинку описание как бы прячется под нее. Используется jQuery и TweenMax.
Эффект разрезанного изображения
За счет использования ряда элементов
Анимация при наведении на логотипы
В примере использованы свойства CSS,которые анимируют SVG-изображение при наведении на круг.
Несколько интересных hover-эффектов со при наведении на изображение от одного автора
Описание появляется на красном фоне, состоящем из полупрозрачных треугольников.
Используем белые треугольники для отображения описания.
Изображения находятся в кругах и при наведении меняются на иконку. CSS + небольшой код на jQuery.
Описание появляется в виде белого прямоугольника. CSS + небольшой код на jQuery.
Эффект появления описания в анимированных черных прямоугольниках.
Хороший вариант для сайта художников, фотографов или модельеров.
Отличный вариант анимированных описаний на разноцветных фонах с использованием css-переменных.
Интересный эффект для блока с командой. Изображение прявляется при наведении. CSS + небольшой код на jQuery.
Еще один вариант оформления блока с командой, хотя это и не очень понятно по виду изображений. CSS + небольшой код на jQuery.
Лаконичное описание команды.
Следующий пример можно использовать для вывода профиля пользователя.
Элементы figure и figcaption
Перевод Екатерина Мордвина
Элемент Скопировать ссылку
Предполагается, что элемент будет использоваться в сочетании с элементом для того, чтобы выделять диаграммы, иллюстрации, фотографии и примеры кода (помимо прочего). Вот что говорится о в спецификации:
Элемент представляет собой фрагмент независимого содержимого, совсем необязательно с подписью, который как правило относится к отдельному элементу из основного содержимого документа, и может быть удалён из документа без ущерба его смыслу. Спецификация W3C
Элемент Скопировать ссылку
и даже заголовки с
. Семантика элемента изменилась, и поэтому мы начали использовать комбинацию и внутри по предложению Джереми. Но большинство этих идей были отклонены из-за отсутствия обратной совместимости для CSS-оформления.
Использование и Скопировать ссылку
Итак, мы узнали, что об этих элементах говорится в спецификации. Как же их использовать? Давайте рассмотрим это на примерах.
для изображения Скопировать ссылку
Изображение в элементе без подписи:
с изображением и подписью Скопировать ссылку
Изображение внутри элемента с поясняющей подписью:
Наглая макака из Борнео. Фото Ричарда Кларка
И код, который мы использовали:
с несколькими изображениями Скопировать ссылку
Размещение нескольких изображений внутри одного элемента с общей подписью:
Слева направо: кукабара, пеликан и многоцветный лорикет. Фотографии Ричарда Кларка
с блоком кода Скопировать ссылку
Элемент может быть также использован для примеров кода:
Ниже приведен код для этого:
Различия между и Скопировать ссылку
Обратите внимание, что если положение содержимого в тексте тесно связано с предыдущим и последующим содержимым, следует использовать более подходящие элементы — например,
Не останавливайтесь на достигнутом! Скопировать ссылку
Не стоит ограничивать использование изображениями и примерами кода. Другим содержимым, подходящим по смыслу для использования в элементе может быть аудио, видео, графики (возможно, с использованием или ), стихи или таблицы со статистикой.
Вывод Скопировать ссылку
Как мы продемонстрировали в этой статье, элемент открывает много возможностей. Только не забудьте убедиться, что он подходит для конкретного случая. Хотя вряд ли вы бездумно относитесь к разметке, так ведь?
Быстрая Подсказка: Возьмите Ваш Код Внутрь Элемента “figure”
Тег был представлен HTML5 некоторое время назад, однако вы пока можете не знать, что он делает или как он может быть использован в различных ситуациях. В этом уроке вы узнаете разницу между тегом и другими аналогичными тегами и то, как вы можете начать его использовать для группировки элементов в вашей разметке.
Этот урок для начинающих, но он также может быть напоминанием для остальных.
Типичное Использование Тега
Давайте сначала посмотрим, что говорит HTML5 Doctor по этому поводу:
Таким образом, элемент figure определяет отдельное содержимое, как иллюстрации и фотографии. Это означает, что вы всегда будете использовать тег figure для размещения чего-то другого.
Единственное общее заблуждение это то, что figure может быть использован только для изображений. На самом деле он может быть использован для группировки любых элементов, в том числе, но не ограничиваясь этим, изображений, видео, аудио и кодовых блоков.
Определение Структуры Страницы
Элемент figure является секционным корнем, это означает, что он эффективно изолирует свое содержимое от структуры своего предка. Содержимое figure не способствует результату документа. Он ведет себя как структурный элемент страницы и поэтому может содержать в себе свои собственные заголовки, начиная с
и вниз по иерархии
и так далее, но это не имеет никакого отношения к иерархии извне:
Иерархия в figure не имеет никакого отношения к результату своего предка.
Такие элементы, как этот используются для введения внешнего содержимового в документе, как цитата, например. другой пример элемента секционного корня.
Изображения
Вот типичный пример того, как тег figure может быть использован для отображения изображения.
Вы, возможно, думаете, «Зачем брать тег «img» в дополнительный элемент?» Это справедливый вопрос, но он начинает иметь смысл как только вы осознаете, что может содержать в себе более чем один дочерний элемент как подпись.
Многочисленные Изображения
Использование для Кодовых Блоков
Талант элемента figure на группировании элементов с общой тематикой не заканчивается. Возможно вы хотите сгруппировать код вместе с подписью, для этого вы можете использовать figure и figcaption следующим образом:
Подводя Итог
Вот и все! Вы узнали, как использовать элемент figure вместе с figcaption и другие элементы для группировки нескольких элементов вместе. Как вы используете элемент figure на данный момент? Будет ли это изменение в результате прочтения этой Быстрой Подсказки? Расскажите нам в комментариях!
Элементы figure и figcaption
Перевод: Влад Мержевич
Элемент
Элемент figure представляет собой самодостаточный блок контента с возможным заголовком, на который, как правило, ссылаются из основного потока документа. Этот блок может быть перемещён из основного потока документа без потери общего смысла документа.
Элемент
Элемент figcaption представляет собой заголовок или легенду для figure.
Использование и
Мы узнали, что спецификация говорит об этих элементах. Но как их использовать? Давайте взглянем на несколько примеров.
с изображением
с изображением и заголовком
Изображение внутри элемента с поясняющим заголовком.
Нахальная макака. Река Нижняя Кинтаганбан, Борнео. Источник: Ричард Кларк
И код, который мы использовали.
с несколькими изображениями
Несколько изображений внутри одного с единым заголовком.
Австралийские птицы. Слева направо: кукабурра, пеликан и многоцветный лорикет.
Источник: Ричард Кларк
с блоком кода
Элемент может также применяться для примеров кода.
Различие между и
Мы рассмотрели в предыдущей статье и важно отметить различие между двумя этими элементами. Выбирая между и вы должны спрашивать себя, является ли содержание важным для понимания раздела.
С учётом этого, если положение элемента связано с предыдущим и последующим содержанием, то воспользуйтесь более подходящим элементом, например,
и, возможно даже, в зависимости от его содержимого.
Не останавливаться на достигнутом!
Нет необходимости ограничивать ваши изображениями и примерами кода. Другое содержимое вполне подходит для использования, включая аудио, видео, графики (возможно, с использованием или ), стихи или таблицы со статистикой.
Резюме
Как мы показали в этой статье, у элемента есть множество возможностей, помните, что это наиболее подходящий элемент для работы. И вы уже используете его во всех своих макетах, на так ли?
Использование тега figure для разметки
Тег figure появился в спецификации HTML5 сравнительно давно, но не все еще знакомы с ним и с тем, для чего его можно использовать. В этой статье мы рассмотрим разницу между ним и другими аналогичными тегами, и как его использовать для группировки элементов.
В спецификации указано, что элемент figure представляет собой содержимое в общем потоке, с необязательно указанным описанием, самодостаточное, обычно упоминаемое в качестве смысловой единицы в основном тексте. Другими словами, он идеально подходит для иллюстраций и фотографий.
Но, это не значит, что его нельзя использовать для оформления блоков с другим содержанием. Его можно использовать для группировки любых данных: изображения, видео, аудио, блоки кода.
Определение структуры документа.
Элемент figure является корневым и с его помощью можно отделить его содержимое от общей структуры документа. Внутри него могут содержаться свои заголовки от h1 до h6.
Элементы подобные figure часто используются для оформления вставок внешнего содержимого в документ, например цитат. fieldset является еще одним таким примером.
Изображения.
Вот пример использования элемента figure для оформления изображений:
Возникает вопрос, «зачем использовать дополнительный элемент для оформления изображения». figure есть смысл использовать в случаях, когда внутри него не один элемент, а несколько.
Для задания подписи к картинке можно использовать figcaption.
Несколько изображений.
figure позволяет группировать группу изображений и задавать им общую подпись:
Блоки с кодом.
Новый тег хорошо подходит и для группировки блока с кодом и его описанием. Внутри figure можно использовать теги code, pre и samp.
Полезные статьи в сфере веб-разработки и новости студии
Особенности: aveCRM 6.0 Модуль каталог позволяет управлять всеми блюдами и выгружать.