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

Содержание

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

HTML теги

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

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

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

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

Пример использования тега <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 по умолчанию

figure {
display : block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}

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

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

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

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

HTML теги

| HTML | WebReference

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

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

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>FIGURE</title>
  <style>
   figure {
    background: #5f6a72; /* Цвет фона */
    padding: 10px; /* Поля вокруг */
    width: 150px; /* Ширина */
    float: left; /* Блоки выстраиваются по горизонтали */
    margin: 0 10px 10px 0; /* Отступы */
    text-align: center; /* Выравнивание по центру */
   }
   figcaption {
    color: #fff; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <article>
   <figure>
    <p><img src="image/thumb1.jpg" alt=""></p>
    <figcaption>Софийский собор</figcaption>
   </figure>
   <figure>
    <p><img src="image/thumb2.jpg" alt=""></p>
    <figcaption>Польский костел</figcaption>
   </figure>
  </article>
 </body>
</html>

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

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

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

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

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

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

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

×

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

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

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

как правильно использовать тег figure и тег figcaption

Совет: как правильно использовать тег figure и тег figcaption

От автора: семантические теги figure и figcaption часто используются в паре. Если вы до сих пор не читали документацию по этим тегам, уже пользовались ими в проектах или понятия не имеете, зачем они нужны, в этой статье я привел несколько советов, которые помогут вам правильно применять эти элементы.

Тег figure обычно используется для вставки изображений:

<figure> <img src="dog.jpg" alt="Maltese Terrier"> </figure>

<figure>

  <img src="dog.jpg" alt="Maltese Terrier">

</figure>

Тег figure – замкнутая единица контента. Если вы переместите элемент чуть ниже на странице или в самый низ, это никак не повлияет на его значение в документе. Поэтому нужно помнить, что не все изображения можно указывать в теге figure.

Совет: как правильно использовать тег figure и тег figcaption

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Несколько изображений в теге figure

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

<figure> <img src="dog1.jpg" alt="Maltese Terrier"> <img src="dog2.jpg" alt="Black Labrador"> <img src="dog3.jpg" alt="Golden Retriever"> </figure>

<figure>

  <img src="dog1.jpg" alt="Maltese Terrier">

  <img src="dog2.jpg" alt="Black Labrador">

  <img src="dog3.jpg" alt="Golden Retriever">

</figure>

Figure можно использовать и с другими тегами

Тег figure не ограничивается только лишь изображениями. Его можно использовать с:

Блоками для кода,

Видео,

Аудиофайлами или

Рекламой.

Пример вставки блока с кодом в тег figure:

Совет: как правильно использовать тег figure и тег figcaption

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

<figure> <pre> p { color: #333; font-family: Helvetica, sans-serif; font-size: 1rem; }

<figure>

  <pre>

 

      p {

          color: #333;

          font-family: Helvetica, sans-serif;

          font-size: 1rem;

      }

    

Вложенность одного figure в другой

Тег figure можно поместить внутрь другого тега figure. В коде ниже для улучшения семантики был добавлен ARIA атрибут role.

<figure role="group"> <figcaption>Dog breeds</figcaption> <figure> <img src="dog1.jpg" alt="Maltese Terrier"> <figcaption>Adorable Maltese Terrier</figcaption> </figure> <figure> <img src="dog2.jpg" alt="Black Labrador"> <figcaption>Cute black labrador</figcaption> </figure> </figure>

<figure role="group">

  <figcaption>Dog breeds</figcaption>

  <figure>

    <img src="dog1.jpg" alt="Maltese Terrier">

    <figcaption>Adorable Maltese Terrier</figcaption>

  </figure>

  <figure>

    <img src="dog2.jpg" alt="Black Labrador">

    <figcaption>Cute black labrador</figcaption>

  </figure>

</figure>

Правильное применение figcaption

Тег figcaption представляет собой подпись или легенду к тегу figure. Не всегда тегу figure нужен figcaption. Однако в случаях, когда этот тег необходим, он должен быть первым или последним внутри figure:

<figure> <figcaption>Three different breeds of dog.</figcaption> <img src="dog1.jpg" alt="Maltese Terrier"> <img src="dog2.jpg" alt="Black Labrador"> <img src="dog3.jpg" alt="Golden Retriever"> </figure>

<figure>

  <figcaption>Three different breeds of dog.</figcaption>

  <img src="dog1.jpg" alt="Maltese Terrier">

  <img src="dog2.jpg" alt="Black Labrador">

  <img src="dog3.jpg" alt="Golden Retriever">

</figure>

Или:

<figure> <img src="dog1.jpg" alt="Maltese Terrier"> <img src="dog2.jpg" alt="Black Labrador"> <img src="dog3.jpg" alt="Golden Retriever"> <figcaption>Three different breeds of dog.</figcaption> </figure>

<figure>

  <img src="dog1.jpg" alt="Maltese Terrier">

  <img src="dog2.jpg" alt="Black Labrador">

  <img src="dog3.jpg" alt="Golden Retriever">

  <figcaption>Three different breeds of dog.</figcaption>

</figure>

Если нужно добавить больше семантики изображению, можно использовать теги h2 и p.

<figure> <img src="dogs.jpg" alt="Group photo of dogs"> <figcaption> <h3>Puppy School</h3> <p>Championship Class of 2016</p> </figcaption> </figure>

<figure>

  <img src="dogs.jpg" alt="Group photo of dogs">

  <figcaption>

    <h3>Puppy School</h3>

    <p>Championship Class of 2016</p>

  </figcaption>

</figure>

А вы знаете, как еще можно использовать теги figure и figcaption?

Автор: Georgie Luhur

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

Совет: как правильно использовать тег figure и тег figcaption

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее Совет: как правильно использовать тег figure и тег figcaption

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

| Справочник HTML



Элемент <figure> (от англ. "figure" ‒ «фигура, рисунок») используется для группирования самодостаточного контента, например, иллюстраций, диаграмм, фотографий, примеров кода и т.д.

Хотя содержимое элемента <figure> относится к основному потоку, его позиция является независимой от основного потока и никак не влият на поток документа при удалении.

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

Синтаксис

<figure>  
  ...
</figure>

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

Обязателен.

Атрибуты

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <figure> со следующими значениями CSS по умолчанию:

figure { 
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 40px;
    margin-right: 40px;
}

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

Тег <figure> является новым в HTML5.

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

Элемент <figure>

Используем элемент <figure> для разметки фотографии:

Пример HTML:

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

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

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

Элемент
<figure> 9+ 5+ 11.10+ Да 5.1+ 4+
Элемент
<figure> 2.2+ 4+ 11+ 5+


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

Использование элемента <small> вокруг ссылки на лицензию Creative Commons с rel="license".

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


	<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 справочник

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

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

Пример использования тега <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 теги

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *