Тег figcaption: Тег

Содержание

Тег | 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 теги

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

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

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

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

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

Браузеры

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

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

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

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

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

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

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

: Элемент подписи иллюстрации — Веб-технологии для разработчиков

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

Источник для этого интерактивного пример хранится в GitHub репозитории. Если вы хотите внести свой вклад, ознакомьтесь с https://github.com/mdn/interactive-examples и отправьте нам pull request.

Атрибуты

Этот элемент принимает только глобальные атрибуты.

Примеры

Для примеров <figcaption> смотрите <figure>.

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

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

Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправьте нам pull request.

Update compatibility data on GitHub

	Компьютеры						Мобильные
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome для Android	Firefox для Android	Opera для Android	Safari on iOS	Samsung Internet
`figcaption`	Chrome Полная поддержка 8	Edge Полная поддержка 12	Firefox Полная поддержка 4	IE Полная поддержка 9	Opera Полная поддержка 11	Safari Полная поддержка 5.1	WebView Android Полная поддержка Да	Chrome Android Полная поддержка Да	Firefox Android Полная поддержка 4	Opera Android Полная поддержка 11	Safari iOS Полная поддержка 5.1	Samsung Internet Android Полная поддержка Да

Легенда

Полная поддержка: Полная поддержка

Смотрите также

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

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

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

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

</figure>

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

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

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

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

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

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

</figure>

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

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

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

Видео,

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

Рекламой.

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

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

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

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

<figure>
<pre>

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

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

<figcaption>Dog breeds</figcaption>

<figcaption>Adorable Maltese Terrier</figcaption>

</figure>

<figcaption>Cute black labrador</figcaption>

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

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

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

<h3>Puppy School</h3>

<p>Championship Class of 2016</p>

</figcaption>

</figure>

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

Автор: Georgie Luhur

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

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

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

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

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

PSD to HTML

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

Смотреть

Элементы 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> может быть также использован для примеров кода:

Creative Commons Attribution Share-alike license

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

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

Элемент <figcaption> (от англ. «figure caption» ‒ «подпись к фигуре») определяет заголовок или подпись, связанные с контентом, размещенным в элементе <figure>, который является его непосредственным родительским элементом. Он должен располагаться в качестве первого или последнего дочернего элемента внутри <figure>.

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

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

Синтаксис

<figure>
  <figcaption> ... </figcaption>
  ...
</figure>

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

Обязателен.

Атрибуты

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

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

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

figcaption { 
    display: block;
}

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

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

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

Элемент <figcaption>

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

Пример HTML:

Попробуй сам

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

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

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

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

Элемент
<figcaption>	2.2+	4+	11+	5+

HTML тег figcaption

Пример

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

Пн	Вт	Ср	Чт	Пт	Сб	Вс
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome для Android	Firefox для Android	Opera для Android	Safari на iOS	Samsung Internet
`figcaption`	Chrome Полная поддержка 8	Край Полная поддержка 12	Firefox Полная поддержка 4	IE Полная поддержка 9	Опера Полная поддержка 11	Safari Полная поддержка 5.1	WebView Android Полная поддержка Да	Chrome Android Полная поддержка Да	Firefox Android Полная поддержка 4	Опера Android Полная поддержка 11	Safari iOS Полная поддержка 5.1	Samsung Интернет Android Полная поддержка Да

Тег figcaption: Тег | htmlbook.ru

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

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

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

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

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

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

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

| HTML | WebReference

Синтаксис

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

Пример

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

Браузеры

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

: Элемент подписи иллюстрации — Веб-технологии для разработчиков

Атрибуты

Примеры

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

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

Легенда

Смотрите также

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

Элемент <figure>

Элемент <figcaption>

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

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

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

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

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

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

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

Резюме

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

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

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

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

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

PSD to HTML

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

Элемент <figure>#

Элемент <figcaption>#

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

<figure> для изображения#

<figure> с изображением и подписью#

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

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

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

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

Вывод#

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

Синтаксис

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

Атрибуты

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

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

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

Элемент <figcaption>

Пример HTML:

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

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

HTML тег figcaption

Пример

Определение и использование

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

Глобальные атрибуты

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

Другие примеры

Пример

Связанные страницы

Настройки CSS по умолчанию

: Элемент Figure Caption — Веб-технологии для разработчиков

Атрибуты

Примеры

Технические характеристики

Совместимость с браузером

Условные обозначения

См. Также

Рисунок и элементы figcaption

element

Элемент `<figure>`#

Элемент `<figcaption>`#

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

`<figure>` для изображения#

`<figure>` с изображением и подписью#

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

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

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

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

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

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