"Истина где-то рядом."

Уроки HTML

Скрипты PHP

Шаблоны HTML

Меню сайта
Уроки HTML
Уроки CSS
HTML5
Скрипты JAVA
Вёрстка
Графика
Обзор хостингов
Дополнительно


Реклама на сайте:




Как сделать подпись под картинкой в HTML5


папка digest

HTML5

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

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

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

Элемент figure

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

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

Элемент figcaption

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

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

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

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

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

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

figure для изображения:

Изображение в элементе <figure> без подписи.

Хитрый лис на опушке леса

Пример кода к этой картинке:
	<figure>
	    <img src="img/lis.jpg"
	         alt="Хитрый лис на опушке леса"
	</figure>

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

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

Порода собак
Овчарка по кличке Пальма. Фото Обзор породы собак

Код который мы использовали:

<figure>
	<img src="img/palma.jpg" alt="Порода собак">
	<figcaption>
	Овчарка по кличке Пальма.
	Фото <a href="…">Обзор породы собак</a>
	</figcaption>
	</figure>

Элемент figcaption с применением стилей CSS

Внешний вид, можно подправить, если использовать таблицу стилей CSS. Добавьте вот такой стиль CSS:

 .figure { 
 border: 1px solid #ccc; /* рамка */ 
 background-color: #f1f0f0; /* цвет фона */
 padding: 15px; /* отступы от картинки */ 
 width: 400px; /* ширина картинки */
 }
 

В результате получится вот такая картинка:

Лиса на зимней опушке

Так что, для подписи под картинкой не ограничивайте себя только HTML5, для улучшения вида используйте CSS.


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

 



Создано|Обновлено: 19.07.2020.