Тег figcaption: : Элемент подписи иллюстрации — HTML

Элементы figure и figcaption | htmlbook.ru

Оригинал: http://html5doctor.com/the-figure-figcaption-elements/

Перевод: Влад Мержевич

В традиционных печатных материалах вроде книг и журналов изображения, графики или примеры кода сопровождаются заголовками. До сегодняшнего дня у нас не было способа семантически верстать такого рода контент непосредственно в нашем HTML, вместо использования классов CSS. HTML5 надеется решить эту проблему путём введения элементов <figure> и <figcaption>. Давайте разбираться с ними!

Элемент <figure>

Элемент <figure> используется в сочетании с <figcaption> и предназначен для разметки диаграмм, иллюстраций, фотографий, примеров кода и других вещей. Вот что спецификация говорит о <figure>.

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

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

Элемент <figcaption>

Элемент <figcaption> был предметоммногочисленныхспоров. В спецификации вначале хотели переориентировать <legend>, а не вводить новый элемент. Другие предложения включали <label>, <caption>, <p> или <h2>…<h6>. <legend> был изменён, затем по предложению Джереми внутри <figure> использовали комбинацию <dt> и <dd>. Большинство этих предложений провалилось, поскольку не было обратной совместимости для управления стилями через CSS.

Постоянные читатели уже в курсе, что новый элемент был представлен недавно под именем <figcaption>. Кто знает, приживётся ли этот элемент, но вот что сейчас спецификация говорит о <figcaption>:

Элемент figcaption представляет собой заголовок или легенду для figure.

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

Элемент <figcaption> не обязателен и добавляется до или после содержимого внутри <figure>. Только один <figcaption> может находиться внутри <figure>, при этом допустимо добавлять множество других дочерних элементов (например, <img> или <code>).

Использование <figure> и <figcaption>

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

<figure> с изображением

Изображение без заголовка внутри элемента <figure>.

Вот код для этого.

<figure>
  <img src="/orang-utan.jpg" alt="Детёныш орангутанга держится за верёвку">
</figure>

<figure> с изображением и заголовком

Изображение внутри элемента <figure> с поясняющим заголовком.

Нахальная макака. Река Нижняя Кинтаганбан, Борнео. Источник: Ричард Кларк

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

<figure>
  <img src="/macaque.jpg" alt="Макака на дереве">
  <figcaption>Нахальная макака. Река Нижняя Кинтаганбан, Борнео. 
  Источник: <a href="http://www. flickr.com/photos/rclark/">Ричард Кларк</a></figcaption>
</figure>

<figure> с несколькими изображениями

Несколько изображений внутри одного <figure> с единым заголовком.

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

Код.

<figure>
  <img src="/kookaburra.jpg" alt="Кукабурра">
  <img src="/pelican.jpg" alt="Пеликан на пляже">
  <img src="/lorikeet.jpg" alt="Нахально смотрящий многоцветный лорикет">
  <figcaption>Австралийские птицы. Слева направо: кукабурра, пеликан и многоцветный лорикет. 
  Источник: <a href="http://www.flickr.com/photos/rclark/">Ричард Кларк</a></figcaption>
</figure>

<figure> с блоком кода

Элемент <figure> может также применяться для примеров кода.

<small><a rel="license"href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution Share-alike license</a></small>

Используйте <small> вокруг ссылки Creative Commons license с rel="license"

И код для этого.

<figure>
  <blockquote><p><code>&lt;small&gt;&lt;a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/"&gt;Creative 
   Commons Attribution Share-alike license&lt;/a&gt;&lt;/small&gt;</code></p></blockquote>
  <figcaption>Используйте <code>&lt;small&gt;</code> вокруг ссылки
  <a href="http://creativecommons.org/choose/"title="Choose a License">Creative Commons license</a> 
  с <code>rel="license"</code></figcaption>
</figure>

Различие между <figure> и <aside>

Мы рассмотрели <aside> в предыдущей статье и важно отметить различие между двумя этими элементами. Выбирая между <figure> и <aside> вы должны спрашивать себя, является ли содержание важным для понимания раздела.

• Если содержание просто связано друг с другом и не важно, используйте <aside>.
• Если содержание имеет важное значение, но его позиция в потоке документа не важна, используйте <figure>.

С учётом этого, если положение элемента связано с предыдущим и последующим содержанием, то воспользуйтесь более подходящим элементом, например, <div>, старым добрым <img>, <blockquote> и, возможно даже, <canvas> в зависимости от его содержимого.

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

Нет необходимости ограничивать ваши <figure> изображениями и примерами кода. Другое содержимое вполне подходит для использования, включая аудио, видео, графики (возможно, с использованием <canvas> или <svg>), стихи или таблицы со статистикой.

При этом задействовать элемент <figure> не всегда может быть целесообразно. Например, графический баннер не должен верстаться с <figure>. Вместо этого просто используйте элемент <img>.

Резюме

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

изображения

Тег | HTML справочник

HTML теги

Значение и применение

Благодаря тегу <figcaption> вы можете вывести пояснение к содержимому, которое находится внутри тега <figure>. Тег <figcaption> должен размещаться как первый, или последний элемент внутри тега <figure>.

Тег <figure> применяется для обозначения контента, иллюстрирующего или поддерживающего определенную идею текста. Тег <figure> может содержать изображение, видеоролик, схему, фрагмент кода, диаграмму или даже таблицу — почти все, что может встретиться в потоке веб-контента и должно восприниматься как автономная единица.

Поддержка браузерами

Тег	Chrome	Firefox	Opera	Safari	IExplorer	Edge
<figcaption>	6.0	4.0	11.1	5.0	9.0	12.0

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <figure></title>
	</head>
	<body>
		<main>
			<figure>
				<img src = "10.jpg" alt = "ничоси" width = "80" height = "80">
				<figcaption>Ничоси 1</figcaption>
			</figure>
			<figure>
				<img src = "10.
  jpg" alt = "ничоси" width = "80" height = "80">
				<figcaption>Ничоси 2</figcaption>
			</figure>
		</main>
	</body>
</html>

В этом примере основное содержимое документа поместили внутри тега <main>, в который мы поместили два элемента <figure>, каждый из которых содержит внутри себя изображение (тег <img>) шириной и высотой 80 пикселей. Кроме того тегом <figcaption> мы вывели текстовое пояснение к содержимому каждого элемента <figure>. Элемент <figcaption> мы разместитили перед закрывающим тегом </figure>.

Результат нашего примера:

Пример использования тега <figure>.

Обратите внимание, что если вы разместите элемент <figcaption> первым вложенным элементом тега <figure>, то пояснение будет отображаться сверху изображения:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <figcaption></title>
	</head>
	<body>
		<main>
			<figure>
				<figcaption>Ничоси 1</figcaption>			
				<img src = "10.  jpg" alt = "ничоси" width = "80" height = "80">
			</figure>
			<figure>
				<figcaption>Ничоси 2</figcaption>
				<img src = "10.jpg" alt = "ничоси" width = "80" height = "80">
			</figure>
		</main>
	</body>
</html>

Результат нашего примера:

Пример использования тега <figcaption>

Значение CSS по умолчанию

figcaption {
display : block;
}

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

Атрибуты событий

Элемент поддерживает «атрибуты событий».

HTML теги

Тег HTML figcaption

❮ Назад Полный справочник HTML Далее ❯

Пример

Используйте элемент

для разметки фотографии в документе, а элемент