Содержит описание для элемента <figure>. <figcaption> (от англ. figure caption — подпись к рисунку) должен быть первым или последним элементом в группе.
Каждая спецификация проходит несколько стадий одобрения.
Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
Браузеры
9
12
5
11.10
5.1
4
2. 2
4
11
5
Браузеры
В таблице браузеров применяются следующие обозначения.
— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
См. также
<figure>
Добавление медиа-контента
Подрисуночная подпись
Элемент <figure>
Практика
Подпись перед картинкой
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 09.10.2018
Редакторы: Влад Мержевич
Почему figcaption не заменяет alt / Хабр
В печатных изданиях изображения часто сопровождались подписью.
В HTML4 не было способа семантически разметить HTML, чтобы сохранить связь между изображением и такого типа подписи. В HTML5 нам дали такую возможность, введя элементы <figure> и <figcaption>.
Давайте для начала определимся с терминами.
alt: альтернативное описания изображения.
<figcaption>: заголовок или сводка для содержимого <figure>. Если у <figure> нет дочернего <figcaption>, то нет и заголовка.
Содержимым у <figure> может быть изображение или что угодно ещё, например, таблица или список. В<figcaption> можно указать описательную метку для фрагмента контента: таблицы, фрагмента кода, списка, цитаты, текста и изображения, но это описание не является жизненно важным для его понимания.
<figcaption> необязательный и может отсутствовать.
<figcaption> может идти до или после содержимого.
<figcaption> может быть всего лишь один у <figure>, но при этом содержимое у <figure> может иметь несколько элементов.
<figcaption> не должен описывать изображение и не должен использоваться вместо альтернативного текста.
Пример из спецификации:
<figure>
<img src="castle1423.jpeg" alt="The castle has one tower, and a tall wall around it.">
<img src="castle1858.jpeg" alt="The castle now has two towers and two walls.">
<img src="castle1999.jpeg" alt="The castle lies in ruins, the original tower all that remains in one piece.">
<figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
</figure>
Какими должны быть alt и figcaption для этой картинки с попугаями?
Плохой пример
<figure>
<img src="popug. jpg" alt="">
<figcaption>Разноцветный попугай сидит с друзьями на веточке.</figcaption>
</figure>
Правильный пример
<img src="popug.jpg" alt="Разноцветный попугай сидит с друзьями на веточке.">
Используйте alt для функционального описания, такого, которое точно объясняет, что находится на изображении.
Используйте в <figcaption> редакционное или иллюстративное описание. Такое описание передаёт информацию о том, почему изображение используется. Это добавляет контекст для содержимого страницы.
Как понять, что такое функциональное описание, а что редакционное? Посмотрим на пример:
Функциональное описание (alt): мужчина смотрит в монитор и пытается понять, что происходит.
Редакционное: Николай Шабалин, автор профессиональных HTML-курсов в HTML Academy в процессе создания нового курса «HTML и CSS. Профессиональная вёрстка сайтов».
<figure>
<img src="author.jpg" alt="Мужчина смотрит в монитор и пытается понять, что происходит.">
<figcaption>Николай Шабалин, автор профессиональных HTML-курсов в HTML Academy в процессе создания нового курса "HTML и CSS. Профессиональная вёрстка сайтов".</figcaption>
</figure>
Больше про alt-текст
6 простых правил хорошего alt-текста
Как правильно написать alt-текст
Онлайн-тренажер про атрибут alt
Элементы figure и figcaption
В традиционных печатных материалах, таких как книги и журналы, изображение, диаграмма или пример кода должны сопровождаться подписью. До сих пор у нас не было способа семантически разметить этот вид контента непосредственно в нашем HTML , вместо этого прибегая к именам классов CSS . HTML 5 надеется решить эту проблему, введя элементы и . Давайте исследовать!
Элемент
Элемент предназначен для использования вместе с элементом для разметки диаграмм, иллюстраций, фотографий и примеров кода (среди прочего) . Спецификация говорит это о :
Элемент figure представляет собой единицу содержимого, необязательно с заголовком, которая является автономной, на которую обычно ссылаются как на единую единицу из основного потока документа, и это может быть удалено от основного потока документа, не затрагивая смысла документа.
Спецификация W3C
Элемент
Элемент был предметом многочисленных споров. Первоначально спецификация хотела перепрофилировать , а не вводить новый элемент. Другие предложения включали элементы ,
,
или — . <легенда> была изменена, поэтому мы использовали комбинацию из
и
внутри по предложению Джереми. Большинство этих предложений провалились, так как не было обратной совместимости стилей с CSS .
Постоянные читатели знают, что недавно был представлен новый элемент, а именно . Кто знает, приживется ли он, но пока вот что говорится в спецификации о :
Элемент figcaption представляет собой подпись или легенду для рисунка.
Спецификация W3C
Элемент является необязательным и может появляться перед или после содержимого внутри . Только один элемент может быть вложен в элемент , хотя сам элемент может содержать несколько других дочерних элементов (например, или ).
Использование
<рисунок> и
Итак, мы увидели, что спецификация говорит об этих элементах. Как мы их используем? Давайте посмотрим на некоторые примеры.
Рисунок с изображением
Изображение внутри элемента без подписи:
Вот код для этого:
Рисунок с изображением и подписью
Изображение внутри элемента с пояснительной подписью:
Дерзкая макака, Нижняя часть реки Кинтаганбан, Борнео. Оригинал Ричарда Кларка
и код, который мы использовали:
<рисунок>
Нахальная макака в низовьях реки Кинтаганбан, Борнео. Автор Ричард Кларк
Рисунок с несколькими изображениями
Вложение нескольких изображений в один элемент
с одной подписью:
Австралийские птицы. Слева направо Кукбарра, Пеликан и Радужный Лорикет. Оригиналы Ричарда Кларка
Код:
<рисунок>
Австралийские птицы. Слева направо Кукбарра, Пеликан и Радужный Лорикет. Оригиналы: Ричард Кларк
Рисунок с блоком кода
Элемент также может использоваться для примеров кода:
Использование <small> вокруг ссылки Creative Commons с rel="лицензия"
Различия между
<рисунок> и <в сторону>
Мы рассмотрели <в сторону> в предыдущей статье, но важно отметить разницу между ними. Вы должны выбрать между <в сторону> или <рисунок> , спросив себя, является ли содержание важным для понимания раздела:
Если содержание просто связано и не является существенным, используйте <в сторону>
.
Если контент важен, но его положение в потоке контента не важно, используйте .
Сказав это, если его позиция относится к предыдущему и последующему содержимому, используйте более подходящий элемент — например,
, старый добрый ,
, или, возможно, даже , в зависимости от его содержимого.
Не останавливайтесь на достигнутом!
Не нужно ограничивать s для изображений и примеров кода. Другой контент, пригодный для использования в , включает аудио, видео, диаграммы (возможно, с использованием или ), стихи или статистические таблицы.
Однако не всегда целесообразно использовать элемент . Например, графический баннер не должен быть размечен . Вместо этого просто используйте элемент .
Резюме
Как мы показали в этой статье, существует множество возможностей для элемента . Просто не забудьте убедиться, что это наиболее подходящий элемент для работы. Но вы уже делаете это для всей своей разметки, верно? 🙂
HTML5 Специальные возможности: элементы figure и figcaption
Элементы figure и figcaption — это два новых элемента HTML5. Вместе они обещают возможность разметки со значением, структурой и взаимосвязью между частью контента и связанным контентом, который действует как описательная метка. В настоящее время реализованная в браузерах семантика figure и figcaption практически отсутствует.
Что говорит спецификация HTML5
фигура элемент
Элемент fig представляет собой некоторый поток содержимого, необязательно с заголовком, который является автономным и обычно упоминается как отдельная единица из основного потока документа.
Таким образом, этот элемент можно использовать для аннотирования иллюстраций, диаграмм, фотографий, списков кодов и т. д., на которые есть ссылки в основном содержании документа, но которые могут быть удалены из этого основного содержания без ущерба для потока документа. содержание, напр. сбоку страницы, на специальные страницы или в приложение.
figcaption элемент
Элемент figcaption представляет собой заголовок или легенду для остального содержимого родительского элемента figcaption элемента figcaption , если таковой имеется.
Пример кода
0126 {оповещение('Внимание!')}
Текущее практическое значение, передаваемое элементами в примере:
Figure 1. JavaScript alert code example
< code> функция warning() {alert('Внимание!')}
Все очень интересно, но что я как разработчик теперь могу сделать?
Для общих случаев использования, до тех пор, пока семантика фигура и figcaption не будут реализованы в браузерах и AT, предлагается следующее:
Используйте описательное слово в начале содержимого figcaption , чтобы дать пользователям представление о том, что содержание обозначает что-либо, например «Рисунок X:» или «Диаграмма Y:»
Будьте последовательны в маркировке figcaption внутри и между страницами.
Поместите figcaption (в коде) перед маркируемым содержимым, чтобы оно объявлялось до маркируемого содержимого.
Пример использования с изображениями см. в HTML5: методы предоставления полезных альтернатив тексту:
3.9 Изображения изображений
3.12 Когда альтернативный текст неизвестен на момент публикации
Как передать семантику?
Семантика figcaption может быть передана визуально путем размещения figcaption над или под маркируемым им контентом и за счет его близости к этому контенту. Из наблюдений за тем, как в настоящее время размечаются рисунки и т. д., в некоторых случаях семантика элемента рисунка не будет отображаться визуально, хотя она может быть указана как часть текста figcaption и/или путем добавления границы или цвета фона. Такие визуальные указания не представляют особой ценности для пользователей, которые не могут ими воспользоваться. Хотя близость дает некоторое указание на семантические отношения, одного этого недостаточно.
Стандартный метод передачи семантики вспомогательным технологиям (AT) заключается в использовании определенных ролей и отношений, предоставляемых API специальных возможностей. Эти роли и отношения обычно сопоставляются браузером с элементами HTML, и AT получает доступ к информации из API, предоставляемого браузером. Проблема возникает с фигурой и figcaption, потому что у фигуры нет указанной роли, и хотя figcaption может быть сопоставлен с ролью подписи в некоторых API специальных возможностей, другие не предоставляют эту роль. Имена элементов могут передаваться через свойства API доступности, но это не дает определенной семантики доступности для данного элемента, поэтому не предоставляется общее определение того, что представляет собой конкретный элемент и что он делает, это может привести и приводит к проблемам совместимости между браузерами и В. Это значительно усложняет как пользователям, так и разработчикам реализацию единого пользовательского интерфейса для программного обеспечения, устройств и платформ.
АРИЯ спешит на помощь?
ARIA может помочь, но не предлагает полного решения:
Не включает роль caption .
Не включает роль фигура .
aria-labeled by и/или aria-described by могут использоваться для связывания содержимого figcaption с содержимым рисунка, но их использование не обеспечивает семантику роли, позволяющую отличить семантику figcaption и figcaption от стандартных методов маркировки. атрибута title и, в случае изображений, атрибута alt.
Для того, чтобы ARIA действительно помогла, предлагается добавить 2 новые роли:
заголовок
Объект содержит описательную информацию, обычно текстовую, о другом элементе пользовательского интерфейса, таком как таблица, диаграмма или изображение.
фигурка
Объект представляет собой контейнер для элемента пользовательского интерфейса, такого как таблица, диаграмма или изображение, и подписи, которая помечает элемент.
Различные сценарии
Требуются ли дополнительные роли, зависит от того, что обеспечит наилучшее взаимодействие с пользователем. Хотят ли пользователи знать об обеих структурах? Должен ли контент figcaption быть связан с рисунком или содержимым, которое он содержит? Должна ли ни одна, одна или обе структуры не озвучиваться AT? Должна ли подпись всегда объявляться перед содержимым рисунка или после или зависеть от размещения подписи (до/после)?
Следующие сценарии также доступны на тестовой странице, на которой содержится встроенная информация о роли для имитации того, что будет доступно пользователю AT для каждого сценария.
Сценарий 1
Объявляется наличие и рисунка, и подписи, озвучивается начало и конец рисунка. заголовок объявляется перед содержанием. (Имитирует фигуру, помеченную figcaption)
Сценарий 2
Объявляется наличие рисунка, но , а не подписи , озвучивается начало и конец рисунка. содержание подписи объявляется перед содержанием рисунка. (Имитирует фигуру, помеченную figcaption)
Сценарий 3
Наличие подписи, но не цифра объявляется, содержание подписи объявляется перед содержанием рисунка. (Имитирует содержимое рисунка, помеченное figcaption)
Сценарий 5
Наличие подписи но не цифра объявляется, содержание подписи объявляется после содержание рисунка. (Имитирует фигуру, помеченную figcaption)
Сценарий 5
Наличие подписи или рисунка не объявляется, содержание подписи объявляется в зависимости от размещения в коде (до/после)
Примечание. Сценарий 5 — это то, с чем в настоящее время сталкиваются пользователи.
Пример кода для всех сценариев
function warning() {alert('Внимание!')} Пример кода предупреждения JavaScript
Пример выходных данных AT Сценарий 1
Начало фигуры,
Заголовок . Пример кода предупреждения JavaScript
функция предупреждения() {предупреждение('Предупреждение!')}
конец рисунка
Пример выходных данных AT Сценарий 2
Начало фигуры,
Пример кода предупреждения JavaScript
функция предупреждения() {предупреждение('Предупреждение!')}
конец рисунка
Пример выходных данных AT Сценарий 3
Заголовок,
Пример кода предупреждения JavaScript
функция предупреждения() {предупреждение('Предупреждение!')}
Пример выходных данных AT Сценарий 4
функция предупреждения() {предупреждение('Предупреждение!')}
Заголовок,
Пример кода предупреждения JavaScript
Пример выходных данных AT Сценарий 5
функция предупреждения() {предупреждение('Предупреждение!')}
Пример кода предупреждения JavaScript
Чего хотят пользователи?
Я закодировал тестовую страницу с примерами из приведенных выше сценариев, моделируя, какая информация может быть объявлена и заказана, пожалуйста, попробуйте ее в своем любимом AT и оставьте комментарии.
jpg» alt=»»></p>
<figcaption>Купеческий клуб</figcaption>
</figure>
<figure>
<p><img src=»image/thumb4.jpg» alt=»»></p>
<figcaption>Памятник Св. Владимиру</figcaption>
</figure>
</article>
</body>
</html>
2
jpg" alt="">
<figcaption>Разноцветный попугай сидит с друзьями на веточке.</figcaption>
</figure>
HTML 5 надеется решить эту проблему, введя элементы 
Другие предложения включали элементы 
Слева направо Кукбарра, Пеликан и Радужный Лорикет. 
org/licenses/by-sa/3.0/">Creative Commons Attribution Share-alike license< ;/a></small>
В настоящее время реализованная в браузерах семантика figure и figcaption практически отсутствует. 
содержание подписи объявляется перед содержанием рисунка. (Имитирует фигуру, помеченную figcaption)
Пример кода предупреждения JavaScript