|
||||||||||||
Меню сайта
Реклама на сайте:
|
Как сделать подпись под картинкой в HTML5Статья № 4. 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 с изображением и подписью: Изображение внутри элемента <figure> с поясняющей подписью. Код который мы использовали:
Элемент figcaption с применением стилей CSSВнешний вид, можно подправить, если использовать таблицу стилей CSS. Добавьте вот такой стиль CSS: .figure { border: 1px solid #ccc; /* рамка */ background-color: #f1f0f0; /* цвет фона */ padding: 15px; /* отступы от картинки */ width: 400px; /* ширина картинки */ } В результате получится вот такая картинка: Так что, для подписи под картинкой не ограничивайте себя только HTML5, для улучшения вида используйте CSS.
Читайте также:
|