Figure html что это
Элементы figure и figcaption
Перевод: Влад Мержевич
Элемент
Элемент figure представляет собой самодостаточный блок контента с возможным заголовком, на который, как правило, ссылаются из основного потока документа. Этот блок может быть перемещён из основного потока документа без потери общего смысла документа.
Элемент
Элемент figcaption представляет собой заголовок или легенду для figure.
Использование и
Мы узнали, что спецификация говорит об этих элементах. Но как их использовать? Давайте взглянем на несколько примеров.
с изображением
с изображением и заголовком
Изображение внутри элемента с поясняющим заголовком.
Нахальная макака. Река Нижняя Кинтаганбан, Борнео. Источник: Ричард Кларк
И код, который мы использовали.
с несколькими изображениями
Несколько изображений внутри одного с единым заголовком.
Австралийские птицы. Слева направо: кукабурра, пеликан и многоцветный лорикет.
Источник: Ричард Кларк
с блоком кода
Элемент может также применяться для примеров кода.
Различие между и
Мы рассмотрели в предыдущей статье и важно отметить различие между двумя этими элементами. Выбирая между и вы должны спрашивать себя, является ли содержание важным для понимания раздела.
С учётом этого, если положение элемента связано с предыдущим и последующим содержанием, то воспользуйтесь более подходящим элементом, например,
и, возможно даже, в зависимости от его содержимого.
Не останавливаться на достигнутом!
Нет необходимости ограничивать ваши изображениями и примерами кода. Другое содержимое вполне подходит для использования, включая аудио, видео, графики (возможно, с использованием или ), стихи или таблицы со статистикой.
Резюме
Как мы показали в этой статье, у элемента есть множество возможностей, помните, что это наиболее подходящий элемент для работы. И вы уже используете его во всех своих макетах, на так ли?
Элементы 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 потребуется следующая разметка:
Быстрая Подсказка: Возьмите Ваш Код Внутрь Элемента “figure”
Тег был представлен HTML5 некоторое время назад, однако вы пока можете не знать, что он делает или как он может быть использован в различных ситуациях. В этом уроке вы узнаете разницу между тегом и другими аналогичными тегами и то, как вы можете начать его использовать для группировки элементов в вашей разметке.
Этот урок для начинающих, но он также может быть напоминанием для остальных.
Типичное Использование Тега
Давайте сначала посмотрим, что говорит HTML5 Doctor по этому поводу:
Таким образом, элемент figure определяет отдельное содержимое, как иллюстрации и фотографии. Это означает, что вы всегда будете использовать тег figure для размещения чего-то другого.
Единственное общее заблуждение это то, что figure может быть использован только для изображений. На самом деле он может быть использован для группировки любых элементов, в том числе, но не ограничиваясь этим, изображений, видео, аудио и кодовых блоков.
Определение Структуры Страницы
Элемент figure является секционным корнем, это означает, что он эффективно изолирует свое содержимое от структуры своего предка. Содержимое figure не способствует результату документа. Он ведет себя как структурный элемент страницы и поэтому может содержать в себе свои собственные заголовки, начиная с
и вниз по иерархии
и так далее, но это не имеет никакого отношения к иерархии извне:
Иерархия в figure не имеет никакого отношения к результату своего предка.
Такие элементы, как этот используются для введения внешнего содержимового в документе, как цитата, например. другой пример элемента секционного корня.
Изображения
Вот типичный пример того, как тег figure может быть использован для отображения изображения.
Вы, возможно, думаете, «Зачем брать тег «img» в дополнительный элемент?» Это справедливый вопрос, но он начинает иметь смысл как только вы осознаете, что может содержать в себе более чем один дочерний элемент как подпись.
Многочисленные Изображения
Использование для Кодовых Блоков
Талант элемента figure на группировании элементов с общой тематикой не заканчивается. Возможно вы хотите сгруппировать код вместе с подписью, для этого вы можете использовать figure и figcaption следующим образом:
Подводя Итог
Вот и все! Вы узнали, как использовать элемент figure вместе с figcaption и другие элементы для группировки нескольких элементов вместе. Как вы используете элемент figure на данный момент? Будет ли это изменение в результате прочтения этой Быстрой Подсказки? Расскажите нам в комментариях!
Figure html что это
Где ожидается потоковое содержимое.
Обычно элемент используется для обозначения визуальных объектов, которые дополняют основную информацию и улучшают ее восприятие:
Чаще всего такие элементы имеют явные или косвенные отсылки из основного потока:
Такие выноски могут включать в себя произвольное содержимое:
Атрибуты
Неявная отсылка
Тег может использоваться для разметки любых автономных элементов, которые дополняют основное содержимое. В некоторых случаях такие элементы сопровождаются отсылками из самого текста:
Такие отсылки называются неявными и указывают на примерное местоположение объекта.
Подпись
Явная отсылка
Когда мы используем неявные отсылки, мы указываем на местоположение объекта, и его перемещение может нарушить смысл страницы. Вместо этого рекомендуется применять явные отсылки по некоторому идентификатору, например, по номеру рисунка, что делает объект более автономным.
Ярлыки
Мы можем улучшить наш пример еще сильнее, оформив явную отсылку в виде ярлыка на соответствующий объект.
Содержимое подписи
Подпись может содержать в себе не только текст, но и любое потоковое содержимое. Используем тег , чтобы выделить важную часть из шаблона подписи.
Листинг кода
Как мы уже говорили, может использоваться не только для изображений. Например, мы можем пометить им листинг некоторого кода, описываемого в статье.
Блок контента
Фотогалерея
Вложенные объекты
Группа элементов могут быть сгруппированы и объединены в общий родительский объект с описанием группы.