как в html коде размещается тег figcaption относительно тега 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

Apr 25, 2016 · 2 min read

Элементы 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 и figcaption

Перевод Екатерина Мордвина

Элемент Скопировать ссылку

Предполагается, что элемент будет использоваться в сочетании с элементом для того, чтобы выделять диаграммы, иллюстрации, фотографии и примеры кода (помимо прочего). Вот что говорится о в спецификации:

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

Элемент Скопировать ссылку

и даже заголовки с

. Семантика элемента изменилась, и поэтому мы начали использовать комбинацию и внутри по предложению Джереми. Но большинство этих идей были отклонены из-за отсутствия обратной совместимости для CSS-оформления.

Использование и Скопировать ссылку

Итак, мы узнали, что об этих элементах говорится в спецификации. Как же их использовать? Давайте рассмотрим это на примерах.

для изображения Скопировать ссылку

Изображение в элементе без подписи:

с изображением и подписью Скопировать ссылку

Изображение внутри элемента с поясняющей подписью:

Наглая макака из Борнео. Фото Ричарда Кларка

И код, который мы использовали:

с несколькими изображениями Скопировать ссылку

Размещение нескольких изображений внутри одного элемента с общей подписью:

Слева направо: кукабара, пеликан и многоцветный лорикет. Фотографии Ричарда Кларка

с блоком кода Скопировать ссылку

Элемент может быть также использован для примеров кода:

Ниже приведен код для этого:

Различия между и Скопировать ссылку

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

Не останавливайтесь на достигнутом! Скопировать ссылку

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

Вывод Скопировать ссылку

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

Источник

Как у вас обстоят дела с figure в HTML 5?

Дата публикации: 2019-02-20

От автора: элементы figcaption и figure в HTML 5 предназначены для создания значимой структуры разметки, что обеспечивает описательную метку для части контента, которая имеет отношение к текущему документу, но не жизненно важна для его понимания. Чтобы получить более конкретную информацию, давайте рассмотрим эти элементы отдельно.

Элемент figure

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

figure может использоваться с или без figcaption. Однако без заголовка или альтернативного средства предоставления доступного имени (например aria-label) figure может не предоставлять большой ценности, передавая только семантику. В некоторых случаях он может вообще не передавать никакой семантики, если ему не задано доступное имя.

Элемент figcaption

figcaption предоставляет заголовок или краткое изложение контента, который содержит figure. Значение figcaption должно быть доступным именем для элемента figure, если вместо него для figure не используется атрибут aria-label или aria-labelled.

figcaption может быть помещен до или после первичного содержимого figure, однако он должен быть прямым потомком элемента figure. Допустимые шаблоны:

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

figcaption не является заменой текста alt

Что касается изображений, используемых внутри figure, одно из самых больших недоразумений при использовании figcaption заключается в том, что он используется вместо альтернативного текста изображения. Такая практика описана в HTML 5.2 как некорректная попытка донести значимую информацию, но только тогда, когда изображения публикуются без возможности автора предоставить соответствующий текст alt.

Из руководства HTML 5.2: Такие случаи должны быть сведены к абсолютному минимуму. Если у автора есть хоть малейшая возможность предоставить реальный альтернативный текст, то было бы недопустимо опускать атрибут alt.

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

Если для изображения задано пустое значение alt, тогда figcaption фактически ничего не описывает. И это не имеет особого смысла, не так ли? Давайте рассмотрим figure, содержащий фрагмент кода Sass:

По сравнению с изображениями с пустыми alt внутри figure, это все равно, что вставить фрагмент кода aria-hidden=»true». Это лишит возможности программы чтения с экрана и другие вспомогательные технологии анализировать содержимое, к которому относится заголовок. Однако это, к сожалению, отражение того, что обычно происходит с изображениями в figure.

Во-вторых, alt предназначен для передачи важной информации, которую представляет изображение. A figcaption должен предоставлять контекст для связи figure (изображения) с основным документом или для выдачи определенной части информации, на которую следует обратить внимание. Если а figcaption заменяет собой alt, то это создает дублирующую информацию для зрячих пользователей.

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

figure и программы для чтения с экрана

Теперь, когда у нас есть представление о том, как следует использовать figure и их подписи, давайте рассмотрим, как эти элементы распознаются программами чтения с экрана?

В идеале figure должен объявлять роль и содержимое figcaption, как доступное имя. Человек должен иметь возможность переходить в figure и независимо взаимодействовать с содержимым figure и figcaption. Для браузеров, которые не полностью поддерживают figure, таких как Internet Explorer 11, ARIArole=»figure» и aria-label могут использоваться для увеличения вероятности того, что разметка будет распознаваться некоторыми программами чтения с экрана.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Вот обзор того, как протестированные программы чтения с экрана с настройками по умолчанию предоставляют эту информацию (или не предоставляют) в разных браузерах:

JAWS 18, 2018 и 2019

JAWS имеет лучшую поддержку для объявления собственно figure и их подписей, хотя поддержка не является совершенной или постоянной в зависимости от браузера и настроек JAWS.

IE11 требует использования role=»figure» и aria-label или aria-labelled, указывающих на figcaption, чтобы воспроизвести нативные объявления. Неудивительно, что IE11 не поддерживает нативный элемент, так как рейтинг браузера IE11 в HTML5 Accessibility не улучшается. Но, по крайней мере, ARIA aria может предоставить семантику.

Edge не будет объявлять о присутствии роли figure вообще, независимо от того, используется ARIA или нет. Скорее всего, это изменится, когда Edge переключится на Chromium.

Chrome и Firefox предлагают аналогичную поддержку, однако JAWS (с настройками по умолчанию) + Chrome будет полностью игнорировать figure (включая содержимое его figcaption), если изображение имеет пустой текст alt или атрибут alt отсутствует.

Это означает, что те подписи, которые сопровождают изображения в различных статьях Medium, полностью игнорируются JAWS в паре с Chrome. Если настройки JAWS обновляются для объявления всех изображений (например, изображений, в которых не указан атрибут или значение alt), то JAWS с Chrome должен объявлять эти подписи к рисункам.

JAWS с Firefox, в отличие от Chrome, все равно будет объявлять figure и figcaption, если изображение содержит пустой alt или alt отсутствует, но, так как изображение будет полностью игнорироваться, человек с помощью программы чтения с экрана просто сделает вывод, что основным содержимым этого figure было изображение.

При тестировании NVDA версии 2018.4.1 с IE11, Edge, Firefox 64.0.2 и Chrome 71 figure не определялся. Самым близким признаком того, что что-то здесь может быть, было то, что NVDA + IE11 объявлял «редактировать» до объявления изображения или содержимого figcaption (хотя это «редактировать» не имело никакого смысла…). Шаблоны тестирования с role=»figure» не изменили это поведение. Содержимое figure по-прежнему было доступно, но связь содержимого и подписи не передавалась.

VoiceOver (macOS)

Тестирование проводилось с Safari (12.0.2) и Chrome (71.0.3578.98) на macOS 10.14.2, с VoiceOver 9.

Safari

При тестировании с Safari, роль figure объявлялась. Роль figure не объявлялась если он не имеет доступного имени (например, нет figcaption, aria-label и т.д.). VoiceOver может переходить в figure и взаимодействовать с основным контентом figure и figcaption отдельно.

Chrome

Хотя инспектор доступности Chrome отмечает, что семантика figure раскрывается, а доступное имя обеспечивается его заголовком, VoiceOver не обнаруживает и не объявляет о присутствии figure, как это происходит в Safari, если figure специально не содержит aria-label. Использование aria-describedby ИЛИ aria-labelledby для figure, чтобы указать на figcaption не выявляет figureв для VoiceOver. Для правильной передачи данных в VoiceOver с помощью Chrome потребуется следующая разметка:

Источник