Добавление подписей под изображениями в HTML: инлайн-стиль

Быстрый ответ

Для того чтобы добавить подпись к изображению в HTML, следует использовать элементы <figure> и <figcaption>:

<figure>
  <img src="image.jpg" alt="Описание картинки" width="ширина" height="высота">
  <figcaption>Текст подписи под изображением</figcaption>
</figure>

Таким образом, вы будете группировать изображение и подпись, что позволит повысить и доступность контента и его SEO-параметры.

Изображения на веб-страницах играют ключевую роль, а подписи к ним могут значительно усилить информативность, улучшая интерактивность сайта. Подписи могут не только облагораживать визуальное восприятие, но и становиться эффективной частью SEO-стратегии. Разберем подробнее, как это сделать корректно.

Сделайте подписи обаятельными с помощью CSS

С помощью CSS вы можете придать HTML-коду изысканность и стиль. Применяя его грамотно, вы сможете скорректировать расположение и визуальное оформление подписей к изображениям:

• Чтобы размер подписи был согласован с размером изображения, для <figcaption> задайте свойство max-width и установите text-align: center; для центрирования текста.
• Чтобы объединить изображение с подписью в единый блок, разместите их в контейнере <div> с применением стиля display: inline-block;.
• Оберните изображение в элемент <a>, если хотите сделать его активной ссылкой, и избавьтесь от нежелательного подчеркивания с помощью свойства text-decoration: none;.
• К элементу, контролирующему макет, примените overflow: hidden;, чтобы сохранить его целостность.

Не забывайте и о вопросах визуального отступа. С использованием CSS скорректируйте параметры margin и padding, чтобы обеспечить привлекательное оформление вашего дизайна. Крайне важно выбирать размер и стиль шрифта для подписи так, чтобы они дополняли изображение, а не создавали диссонанс.

Освойте дополнительные особенности добавления подписей

Создание адаптивных подписей и изображений

Для создания адаптивных подписей и изображений следует использовать элементы <picture> и <source>:

<picture>
  <source media="(min-width: 800px)" srcset="large-image.jpg">
  <source media="(min-width: 450px)" srcset="medium-image.jpg">
  <img src="small-image.jpg" alt="Пчела на работе" style="width:auto;">
  <figcaption>Подпись адаптируется вместе с изображением</figcaption>
</picture>

Данный подход гарантирует оптимальное отображение на устройствах с различными размерами экранов, сохраняя при этом чёткость визуального восприятия и единообразие дизайна.

Подробнее об этом расскажет наш спикер на видео

Обтекание и контроль над макетом

Свойство overflow: hidden;, применяемое к контейнеру, поможет вам контролировать обтекание элементов в вашем дизайне и сохранять целостность макета.

Стилизация и впечатляющий эффект

Усильте визуальное восприятие изображения, добавив к нему подпись меньшего размера. Стремитесь к гармонии и проверьте, не заслуживает ли подпись большего внимания.

Визуализация

Можно визуализировать изображение как произведение искусства, а подпись — в роли информационной плашки в художественной галерее:

До:
🖼️

После:
🖼️
🏷️ "Это шедевр Пикассо, созданный в 1955 году"

Соответствующие HTML представления:

<!-- До: Изображение без истории -->
<img src="masterpiece.jpg" alt="Шедевр без описания">

<!-- После: Изображение и его история -->
<figure>
  <img src="masterpiece.jpg" alt="Шедевр Пикассо">
  <figcaption>Праздничная картина Пикассо, созданная в 1955 году</figcaption>
</figure>

С подписью каждое изображение становится порталом в свою историю.

Профессиональные советы и рекомендации

Семантика HTML5

Не стоит игнорировать семантику HTML5. Элементы <figure> и <figcaption> структурируют контент, а этим пользуются вспомогательные технологии.

Атрибут Alt

Снова подчеркнём важность доступности. Атрибут alt помогает тем, кто не в состоянии увидеть изображение, понять его содержимое.

Ширина и высота изображения

Указывая в HTML атрибуты ширины и высоты изображения, вы избежите перекомпоновки страницы при загрузке и обеспечите плавное появление контента.

Гиперссылки на подписи и изображения

Добавляя гиперссылку на изображение с подписью, покройте ею всё — и изображение, и подпись, чтобы они стали связанными элементами.

Соблюдая эти рекомендации, вы сделаете подписи к изображениям не только эстетически привлекательными, но и структурированными.

Полезные материалы

1. HTML изображения — Полное руководство по использованию HTML-тегов для изображений и добавления подписей.
2. <figcaption>: Элемент подписи к фигуре — Статья на MDN, посвященная эффективному применению элемента <figcaption>.
3. Caption-side в CSS — Глубокий анализ свойства caption-side от CSS-Tricks для настройки выравнивания подписей.
4. Генератор адаптивных брейкпоинтов изображений от Cloudinary — Создание адаптивных изображений для различных экранов и эффективного встраивания подписей.
5. Правильное использование текста alt – Проект A11Y — Добейтесь совершенства в обеспечении доступности с помощью текста alt и осмысленных подписей к изображениям. Делитесь своими знаниями — это забота о других!