Всем привет!
В сегодняшней статье я расскажу, как сделать подпись под картинкой в HTML5.
Что такое подпись под картинкой и как же она выгладит?
Это обычная картинка, под которой внизу размещается краткий текст с описанием:
Чтобы создать такую подпись под картинкой, в HTML5 придумали специальные теги:
- тег «figure» создан для группировки HTML изображений и подписей под ними;
- тег «figcaption» создан для подписи под изображением.
Синтаксис:
<figure> <img src = "картинка"> <figcaption>Подпись к картинке </figcaption> </figure>
Пример:
<figure> <img src = "bloggood-ru.jpg"> <figcaption>Автор блога bloggood.ru </figcaption> </figure>
Результат:
Внешний вид, конечно, можно подправить, если использовать таблицу стилей CSS.
Добавьте вот такой стиль CSS:
figure { border: 1px solid #ccc; /* рамка */ background-color: #f1f0f0; /* цвет фона */ padding: 5px; /* отступы от картинки */ width: 182px; /* ширина картинки */ } figcaption { text-align: center; /* подпись по центру*/ }
В результате получится вот такое:
Так что, для подписи под картинкой не ограничивайте себя только HTML5, для улучшения вида пользуйтесь и CSS-ом.
Удачи!
Подписывайтесь на обновление блога! Вас ждет много интересных статьей.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 329815 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274370 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 220443 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186394 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 181503
6 Ответов на комментарий - Как сделать подпись под картинкой в HTML5
Добавить комментарий
Метки: css, html, Вебмастеру, для сайта
Привет Степа! Давно у тебя небыл, все работа да командировки. Хороший пост порой нужно чтото подобное, а все прибомбасы верстки неупомнишь, обязательно запомню. Помнишь я говорил про уроки, написал код, а разьяснение еще нет, то есть серию уроков еще не написал, плюс дописываю в свободное время плагин, как допишу его дам протестить.
Привет, Саша! Я тебе послания ВК оставлял, а тебя нет и нет!
Рад тебя снова видеть.
А динозавры на HTML4 как оформляли подписи?
исключительно с помощью CSS.
Разве в HTML4 был тег “figcaption”? )))
Интересно как такие картинки индексируются поисковиками… Я про тег figure. Например google плохо индексирует картинки в дивах. А как дело обстоит с фигурой?
С чего Вы взяли, что картинки плохо индексируются в дивах?