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

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

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

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

1. Александр

   01.06.2017 в 13:06

   Привет Степа! Давно у тебя небыл, все работа да командировки. Хороший пост порой нужно чтото подобное, а все прибомбасы верстки неупомнишь, обязательно запомню. Помнишь я говорил про уроки, написал код, а разьяснение еще нет, то есть серию уроков еще не написал, плюс дописываю в свободное время плагин, как допишу его дам протестить.
2. Степан => автор блога

   02.06.2017 в 09:16

   Привет, Саша! Я тебе послания ВК оставлял, а тебя нет и нет!
   Рад тебя снова видеть.
3. Цифровой

   29.03.2018 в 10:32

   А динозавры на HTML4 как оформляли подписи?
4. Степан => автор блога

   03.04.2018 в 13:45

   исключительно с помощью CSS.
   Разве в HTML4 был тег “figcaption”? )))
5. srg0065

   12.02.2019 в 19:27

   Интересно как такие картинки индексируются поисковиками… Я про тег figure. Например google плохо индексирует картинки в дивах. А как дело обстоит с фигурой?
6. Степан => автор блога

   05.03.2019 в 22:31

   С чего Вы взяли, что картинки плохо индексируются в дивах?

Добавить комментарий

Нажмите, чтобы отменить ответ.

Имя (required)

Mail (will not be published) (required)

Сайт

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: css, html, Вебмастеру, для сайта