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

HTML теги

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

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

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

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

Тег
Chrome
Firefox
Opera
Safari
IExplorer
Edge
<figure>6.04.011.15.09.012.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 по умолчанию

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

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

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

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

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

HTML теги

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

HTML5 — Когда использовать тег рисунка

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

Определение тега рисунка W3C

В соответствии с W3C,

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

Разница между

рисунок и изображение тег

Разница между фигурой и тегом изображения довольно проста. Тег изображения используется для встраивания изображения в документ HTML, тогда как тег рисунка используется для семантически организовать содержимое изображения в HTML-документе.
Важно отметить, что эти два элемента не являются взаимозаменяемыми. Оба эти элементы одинаково важны на своих местах. Вы не можете использовать тег figure для встраивания изображения в документ HTML5, попробуйте добавить атрибут src к тег figure таким же образом, как и тег img, и вы заметите, что изображение не отображается. Итак, для добавления изображения в HTML5 ничего не изменилось.

документации мы по-прежнему используем тег img для того же. Тогда что изменилось?
До HTML5, если нам нужно было добавить подпись к изображению, мы использовать некоторый тег p или тег span, и, определив для него некоторый класс, мы могли бы стилизовать эти подписи. Таким образом, не было возможности семантически добавить подпись к изображению. через HTML, но с тегом figure есть специальный тег только для подписи к изображению, известные как
. Этот тег по умолчанию отделяет стили обычного абзаца с подписями. Но используя тег figcaption каждый раз, когда вы используете тег фигуры, это не обязательно, это необязательно.


Семантическая разница

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

говорить.

                                
                                
                                
                                <голова>
                                    <мета-кодировка="utf-8">
                                    Изображение без тега рисунка
                                
                                
                                <тело>
                                    

                                        Смотрите ниже, я буду прикреплять изображение ноутбука.
                                    
 

                                    <дел>
                                        Изображение ноутбука
                                        

                                            Вот изображение ноутбука.

Давайте посмотрим на выходную веб-страницу этого примера кода.

Рис.1 — Изображение без тега рисунка

Теперь давайте посмотрим на тот же пример, но с тегом figure вместо тега div для организация контента.

                                
                                
                                
                                <голова>
                                    <мета-кодировка="utf-8">
                                    Изображение с тегом фигуры
                                
                                
                                <тело>
                                    

                                        Смотрите ниже, я буду прикреплять изображение ноутбука. 
                                    

                                    <рисунок>
                                        Изображение ноутбука
                                        
Вот изображение ноутбука.

Давайте посмотрим на вывод этого кода.

Рис.2 — Изображение с тегом фигуры

Увидеть разницу! Как вы можете заметить, я не использовал никаких свойств стиля в кода, все же есть разница в выравнивании изображения и подписи, тег фигуры отвечает за все это. Но кроме выравнивания по умолчанию и изменения стиля, которые обеспечивает тег фигуры, основное преимущество, которое он имеет То есть это также позволяет различным компьютерным программам лучше понимать ваш контент. Человеку довольно легко отличить абзац от изображения. но для машины, это не годится для того же самого. Под машинами я подразумеваю Google Поисковая система или даже ваш веб-браузер в этом отношении.
Весь смысл семантики в том, чтобы разговаривать с этими машинами и инструктировать какая часть документа HTML5 что передает. В первом случае нашего пример с тегом div, при выполнении этих инструкций компьютер программы не понимали, что находится под этим тегом div. Мы можем вставлять что угодно под тегом div, как наш веб-браузер должен знать об этом? Но во втором случае с тегом рисунка вместо тега div он сообщает сети браузер, в котором изображение будет встроено под этим тегом.
Предположим, у вас есть куча изображений в HTML-документе, вы можете использовать тег фигуры чтобы вложить все эти изображения в этот тег фигуры.
Только один элемент

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

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


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

<в стороне> и <рисунок>

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

  1. Если контент связан исключительно с основным контентом и не является существенным, выберите <в сторону>.
  2. Если контент необходим, но его положение в потоке контента не соответствует ценно, перейдите на <рисунок>.

Однако, если контент связан с предыдущей или предстоящей частью контента используйте другие элементы семантики, например, div, section и т. д., в зависимости от того, как содержание связано.

Заключение

Все дело в семантике в современной веб-разработке. Итак, какой бы тег вы ни выбрали должны удовлетворять семантическим требованиям содержания то же самое относится и к фигуре тег тоже. Как я уже говорил, тег figure используется для выравнивания содержимого. семантически, а также то, что мы не можем увидеть невооруженным глазом, это то, что это помогает машинам лучше понимать ваш контент, и в этом весь точка позади семантики. Таким образом, есть достаточно мест, где этот элемент может использоваться, но необходимо соблюдать особую осторожность, чтобы это был именно тот элемент, который работа.

Подробнее

Автор :
Сатьям Кумар —

Вам также понравится:


Тег HTML Figure против тега Img

Перейти к содержимому

Написание семантического кода должно быть целью каждого веб-разработчика. С добавлением десятков новых тегов HTML5 может внезапно возникнуть путаница в отношении того, какие теги вам следует использовать, тем более что вы, возможно, изначально учились по-другому. Разница между тегами изображения и рисунка в HTML5 довольно проста. Первое, что нужно понять, это то, что они не взаимозаменяемы. Теги изображения по-прежнему абсолютно необходимы в HTML, тег рисунка — это просто другой способ организации вашего контента. До HTML5 не было способа семантически добавить подпись к изображению через HTML. Если вы хотите добавить заголовок, вам нужно будет добавить абзац с классом или что-то подобное. В HTML5 а Добавлен элемент

. В соответствии со спецификацией W3C элемент рисунка имеет необязательный заголовок и представляет собой единую единицу вне основного потока документа и может быть удален без изменения смысла документа. Подпись к рисунку
— это подпись или легенда к рисунку.
не является обязательным, и он может быть до, после или внутри
. Однако может быть только один
вложен в <рисунок> . — это то, что находится внутри
. Вы также можете использовать
с блоками кода, аудио, видео, таблицами и т. д. Есть некоторые исключения. Графика, которая является просто графикой, по-прежнему должна быть указана как . Причина, по которой обычная графика заслуживает особого отношения, заключается в том, что она не является необходимой для содержимого страницы. Если кто-то не увидит изображение, он все равно получит четкое сообщение с вашего сайта. Если это кажется немного запутанным, вы можете подумать о
как семантический способ группировки всего, что вам нужно для изображения. Вместо того, чтобы вкладывать изображение и подпись, которые вы поместили в

, в

с классом «изображение» или чем-то подобным, вы можете сгруппировать все изображения, похожие на изображения, вместе внутри < цифра > . Например:

Ведение журнала с чаем
 <рисунок>
Чашка чая с паром и ручкой на кровати

Ведение журнала с чаем

Разве приведенный выше код не выглядит более семантичным, чем этот:

 <дел>
Чашка чая с паром и ручкой на кровати

Ведение журнала с чаем

Вы можете задаться вопросом, следует ли вам использовать