Figcaption html5: &colon; The Figure Caption element — HTML&colon; HyperText Markup Language — Вебджем.рф

Содержание

| HTML | WebReference

Содержание
- Синтаксис
- Закрывающий тег
- Атрибуты
- Пример
- Спецификация
- Браузеры

Содержит описание для элемента <figure>. <figcaption> (от англ. figure caption — подпись к рисунку) должен быть первым или последним элементом в группе.

Синтаксис

<figure>
 <figcaption>Описание</figcaption>
</figure>

Закрывающий тег

Обязателен.

Атрибуты

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>FIGCAPTION</title> <style> figure { background: #d9dabb; /* Цвет фона */ display: block; /* Блочный элемент */ width: 150px; /* Ширина */ height: 190px; /* Высота */ float: left; /* Блоки выстраиваются по горизонтали */ margin: 0 10px 10px 0; /* Отступы */ text-align: center; /* Выравнивание по центру */ } figure img { border: 2px solid #8b8e4b; /* Параметры рамки */ } figure p { margin-bottom: 0; /* Отступ снизу */ } </style> </head> <body> <article> <figure> <p><img src=»image/thumb3.

jpg» alt=»»></p> <figcaption>Купеческий клуб</figcaption> </figure> <figure> <p><img src=»image/thumb4.jpg» alt=»»></p> <figcaption>Памятник Св. Владимиру</figcaption> </figure> </article> </body> </html>

Результат данного примера показан на рис. 1.

Рис. 1. Использование <figcaption>

Спецификация

Спецификация	Статус
WHATWG HTML Living Standard	Живой стандарт
HTML5	Возможная рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

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="Разноцветный попугай сидит с друзьями на веточке.">

Есть и более подходящий правильный пример:

<figure>
    <img src="sinica-v-rukah.jpg" alt="Большая синица.">
    <img src="popug.jpg" alt="Варакушка.">
    <img src="popug.jpg" alt="Голубая сорока.">
    <figcaption>Птицы России</figcaption>
</figure>

Итог

Используйте 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
Элемент
является необязательным и может появляться перед *или* после содержимого внутри
. Только один элемент
может быть вложен в элемент
, хотя сам элемент
может содержать несколько других дочерних элементов (например, или `). Использование <рисунок> и`
`Итак, мы увидели, что спецификация говорит об этих элементах. Как мы их используем? Давайте посмотрим на некоторые примеры. Рисунок с изображением Изображение внутри элемента`
`без подписи: Вот код для этого: Рисунок с изображением и подписью Изображение внутри элемента`
с пояснительной подписью: Дерзкая макака, Нижняя часть реки Кинтаганбан, Борнео. Оригинал Ричарда Кларка и код, который мы использовали: <рисунок> Нахальная макака в низовьях реки Кинтаганбан, Борнео. Автор Ричард Кларк Рисунок с несколькими изображениями Вложение нескольких изображений в один элемент
`с одной подписью: Австралийские птицы. Слева направо Кукбарра, Пеликан и Радужный Лорикет. Оригиналы Ричарда Кларка Код: <рисунок> Австралийские птицы. Слева направо Кукбарра, Пеликан и Радужный Лорикет. Оригиналы: Ричард Кларк Рисунок с блоком кода Элемент`
также может использоваться для примеров кода: Creative Commons Attribution Share-alike лицензия Использование вокруг ссылки на лицензию Creative Commons с rel="license" Вот код для этого: <small><a rel="license" href="http://creativecommons. org/licenses/by-sa/3.0/">Creative Commons Attribution Share-alike license< ;/a></small> Использование <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 и оставьте комментарии.

Рисунок с изображением и подписью

Рисунок с несколькими изображениями

Рисунок с блоком кода

Различия между

Не останавливайтесь на достигнутом!

Резюме

HTML5 Специальные возможности: элементы figure и figcaption

Что говорит спецификация HTML5

Пример кода

Все очень интересно, но что я как разработчик теперь могу сделать?

Как передать семантику?

АРИЯ спешит на помощь?

Различные сценарии

Чего хотят пользователи?

Figcaption html5: : The Figure Caption element — HTML: HyperText Markup Language

| HTML | WebReference

Синтаксис

Закрывающий тег

Атрибуты

Пример

Спецификация

Спецификация

Браузеры

Браузеры

См. также

Практика

Автор и редакторы

Почему figcaption не заменяет alt / Хабр

Плохой пример

Правильный пример

Итог

Больше про alt-текст

Элементы figure и figcaption

Элемент

Элемент

Использование

Рисунок с изображением

Добавить комментарий Отменить ответ

Рубрики