Тег figure что это
Элементы figure и figcaption
Перевод: Влад Мержевич
Элемент
Элемент figure представляет собой самодостаточный блок контента с возможным заголовком, на который, как правило, ссылаются из основного потока документа. Этот блок может быть перемещён из основного потока документа без потери общего смысла документа.
Элемент
Элемент figcaption представляет собой заголовок или легенду для 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 для разметки
Тег figure появился в спецификации HTML5 сравнительно давно, но не все еще знакомы с ним и с тем, для чего его можно использовать. В этой статье мы рассмотрим разницу между ним и другими аналогичными тегами, и как его использовать для группировки элементов.
В спецификации указано, что элемент figure представляет собой содержимое в общем потоке, с необязательно указанным описанием, самодостаточное, обычно упоминаемое в качестве смысловой единицы в основном тексте. Другими словами, он идеально подходит для иллюстраций и фотографий.
Но, это не значит, что его нельзя использовать для оформления блоков с другим содержанием. Его можно использовать для группировки любых данных: изображения, видео, аудио, блоки кода.
Определение структуры документа.
Элемент figure является корневым и с его помощью можно отделить его содержимое от общей структуры документа. Внутри него могут содержаться свои заголовки от h1 до h6.
Элементы подобные figure часто используются для оформления вставок внешнего содержимого в документ, например цитат. fieldset является еще одним таким примером.
Изображения.
Вот пример использования элемента figure для оформления изображений:
Возникает вопрос, «зачем использовать дополнительный элемент для оформления изображения». figure есть смысл использовать в случаях, когда внутри него не один элемент, а несколько.
Для задания подписи к картинке можно использовать figcaption.
Несколько изображений.
figure позволяет группировать группу изображений и задавать им общую подпись:
Блоки с кодом.
Новый тег хорошо подходит и для группировки блока с кодом и его описанием. Внутри figure можно использовать теги code, pre и samp.
Полезные статьи в сфере веб-разработки и новости студии
Особенности: aveCRM 6.0 Модуль каталог позволяет управлять всеми блюдами и выгружать.
9 полезных трюков HTML
Приветствую, Хабр! Представляю вашему вниманию перевод статьи «9 Extremely Useful HTML Tricks» автора Klaus.
У HTML есть много практических секретов, которые могут вам пригодиться.
Но я хочу убедиться, что сайт работает в Internet Explorer и других браузерах.
Я использую Endtest для создания автоматизированных тестов и выполнения их в кросс-браузерном облаке.
Netflix использует ту же платформу для тестирования своих веб-приложений.
Умение обращаться с Endtest даже входит в список необходимых навыков для некоторых их рабочих вакансий.
У Endtest есть несколько действительно полезных функций, таких как:
• Кросс-браузерная сетка, работающая на компьютерах с Windows и MacOS
• Редактор без кода для автоматических тестов
• Поддержка веб-приложений
• Поддержка как собственных, так и гибридных приложений для Android и iOS
• Неограниченное количество видеозаписей для выполнения ваших тестов
• Сравнение
скриншотов
• Геолокация
• Оператор if
• Циклы
• Загрузка файлов в ваши тесты
• API Endtest, для легкой интеграции с вашей системой CI / CD
• Расширенные утверждения
• Мобильные тесты на мобильных устройствах
• Тестирование электронной почты с помощью Endtest Mailbox
Вы можете просмотреть документы.
Ниже приведены 9 чрезвычайно полезных трюков HTML.
1. Тег «figure»
Его можно использовать для разметки фотографии.
Элемент «figure» также может содержать «figcaption» :
И вот как это будет выглядеть:
Fig.1 — SWAT Kats
Он позволяет встроить медиаплеер для воспроизведения видео.
Например, вы можете загрузить свое видео на AWS S3 и использовать тег «video», чтобы вставить его на свой веб-сайт.
Использование YouTube для этого может показаться непрофессиональным.
И Vimeo не позволяет вам вставлять свои видео без оплаты.
Вы можете указать определенные характеристики, как ширина, высота, автозапуск, цикл, элементы управления и т. д.
И вот как это будет выглядеть:
Вы также можете встроить прямой эфир, используя getUserMedia() или WebRTC
Этот тег помогает отображать изображения в общедоступном виде, показывая альтернативную версию изображения для небольших окон просмотра.
Тег «img» будет использоваться только в случае, если окно просмотра не соответствует ни одному из тегов «source» или если не поддерживается браузером.
Тег «progress» отображает ход выполнения задачи.
Этот тег не следует путать с тегом «meter» (который представляет собой датчик).
Вот как это выглядит:
5. Тег «meter»
Вы можете использовать тег «meter» для измерения данных в заданном диапазоне (датчик).
Результат может быть установлен через минимальные и максимальные значения или в процентах.
И вот они: 
6. Тег «map»
Тег «map» используется для определения клиентской карты изображений.
Карта изображения — это изображение с интерактивными областями.
Это означает, что вы создаете карту нашей Солнечной системы, определяете область для каждой планеты и перенаправляете посетителей на отдельную страницу для каждой планеты, которую они выбрали кликом.
7. Атрибут contenteditable
Этот атрибут указывает, является ли содержимое элемента доступным для редактирования.
8. Предложения по вводу
Надеюсь, вы не возражаете, что я не добавил разнообразные стили.
Я предпочитаю оформлять примеры по своему вкусу, как можно красивее.
9. Тег «noscript»
Содержимое внутри элемента «noscript» отображается браузером, только если отключён JavaScript.
Это обеспечивает запасной механизм для компонентов, которые перестанут работать без JavaScript.
Я думаю, это действительно круто, что вы ищете трюки HTML, но уверены ли вы, что ваше веб-приложение работает правильно на всех браузерах и устройствах?
Вы можете использовать Endtest для быстрого создания автоматических тестов и их выполнения в кросс-браузерном облаке.
Вам даже не нужен код, чтобы использовать его.