Html тег figure – Теги figure и figcaption, демонстративный материал — Ссылки и изображения — HTML Academy

<figure>
  <img src="ship320.jpg" alt="Корабль">
  <figcaption>Рис1. - Прогулочный корабль.</figcaption>
</figure>

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

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

Элементы figure и figcaption — Веб-стандарты

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

Элемент <figure>

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

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

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

Элемент <figcaption>

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

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

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

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

Элемент <figcaption> является необязательным и может появляться до или после содержимого внутри <figure>. Только один элемент <figcaption> может быть помещен в <figure>, хотя сам элемент <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="…">Ричарда Кларка</a>
	    </figcaption>
	</figure>

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

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

И сам код:

	<figure>
	    <img src="kookaburra.jpg" alt="Кукабара">
	    <img src="pelican.jpg" alt="Пеликан на пляже">
	    <img src="lorikeet.jpg" alt="Наглый многоцветный лорикет">
	    <figcaption>
	        Слева направо: кукабара, пеликан и многоцветный лорикет.
	        Фотографии <a href="…">Ричарда Кларка</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>

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

	<figure>
	    <blockquote>
	        <p><code><small>
	            <a rel="license" href="…">
	                Creative Commons Attribution Share-alike license
	            </a>
	        </small></code></p>
	    </blockquote>
	    <figcaption>
	        Использование элемента <code>&lt;small&gt;</code>
	        вокруг ссылки на лицензию Creative Commons
	        с <code>rel="license"</code>.
	    </figcaption>
	</figure>

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

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

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

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

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

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

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

Вывод

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

Перевод оригинальной статьи «The figure & figcaption elements» Ричарда Кларка (Richard Clark), опубликованной на сайте HTML5Doctor.com.

Перевод выполнила Екатерина Мордвина.

Теги: html, html5doctor, семантика

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

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

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

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

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

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

<!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>.

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

Обратите внимание, что если вы разместите элемент <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>

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

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

figcaption {
display : block;
}

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

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

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

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

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

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

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