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

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

• Считаете информацию полезной? Поделитесь с друзьями в соц. сетях, выскажете свое мнение в комментариях.

Внимание! Остались вопросы после прочтения статьи или есть что сказать? Оставляйте свои комментарии:

► Оставить коментарий:

Имя: Ваш вопрос:

Леонид Пивторак (Администратор.)
Ответ на вопрос:

Pубрики:

ГлавнаяМедицина Народные средства Сад Дача ОгородСтройка и ремонт Советы автолюбителямПтицеводствоВебмастерскаяИнтересные фактыПолезно знатьДомашние pецепты