BloGGood.ru

Блог Костаневича Степана

WordPress, PHP, HTML, CSS, Windows

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Все про HTML » Как сделать подпись под картинкой в HTML5

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

2017-05-08 / Вр:22:37 / просмотров: 28654

Всем привет!
В сегодняшней статье я расскажу, как сделать подпись под картинкой в HTML5.
Что такое подпись под картинкой и как же она выгладит?
Это обычная картинка, под которой внизу размещается краткий текст с описанием:

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

Чтобы создать такую подпись под картинкой, в HTML5 придумали специальные теги:

  • тег «figure» создан для группировки HTML изображений и подписей под ними;
  • тег «figcaption» создан для подписи под изображением.

Синтаксис:

<figure>
<img src = "картинка">
<figcaption>Подпись к картинке </figcaption>
</figure>

Пример:

<figure>
<img src = "bloggood-ru.jpg">
<figcaption>Автор блога bloggood.ru </figcaption>
</figure>

Результат:

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

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

figure {
border: 1px solid #ccc; /* рамка */
background-color: #f1f0f0; /* цвет фона */
padding: 5px; /* отступы от картинки */
width: 182px; /* ширина картинки */
}
figcaption {
text-align: center; /* подпись по центру*/
}

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

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

Так что, для подписи под картинкой не ограничивайте себя только HTML5, для улучшения вида пользуйтесь и CSS-ом.
Удачи!
Подписывайтесь на обновление блога! Вас ждет много интересных статьей.

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

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

  1. Александр

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

  2. Avatar photo Степан => автор блога

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

  3. Цифровой

    А динозавры на HTML4 как оформляли подписи? :roll:

  4. Avatar photo Степан => автор блога

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

  5. srg0065

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

  6. Avatar photo Степан => автор блога

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

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

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

Метки: , , ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 810
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4716