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

<figure>
  <img src="path/to/image.jpg" alt="Описание изображения">
  <figcaption>Подпись к изображению</figcaption>
</figure>

Здесь мы использовали элемент <figure> для группировки изображения и подписи, а элемент <figcaption> для определения подписи. Атрибут alt используется для описания содержимого изображения, который будет показан в случае, если изображение не может быть загружено или доступно для пользователя с ограниченными возможностями.

Стилизация элементов <figure> и <figcaption> может быть выполнена с помощью CSS, например, чтобы установить отступы, выравнивание и шрифт для подписи.

Пример стилей CSS для элементов <figure> и <figcaption>:

figure {
  margin: 0;
  padding: 0;
}
 
figcaption {
  font-style: italic;
  font-size: 0.8rem;
  text-align: center;
  margin-top: 6px;
}

Здесь мы установили некоторые стили для элемента <figcaption>, чтобы сделать подпись к изображению курсивом, уменьшить размер шрифта, выровнять текст по центру и установить отступ сверху 6 пикселей.

Назад