<figure> - HTML тег для зображень

HTML-елемент <figure> представляє собою автономний (самодостатный) контент, на який посилаються як на єдине ціле з основного потоку документа, і зазвичай це робиться за допомогою підпису (<figcaption>).

Елемент <figure> використовується для анотації ілюстрацій, діаграм, фотографій, коду тощо.

Зазвичай <figure> містить елемент <figcaption>, який надає підпис до контенту всередині <figure>.

Коли на <figure> посилаються з основного змісту документа, ідентифікуючи його за підписом (наприклад, за номером рисунка), це дозволяє легко перемістити такий вміст з основного змісту, наприклад, до краю сторінки, на окремі сторінки або до додатка, не впливаючи на потік документа.

Якщо на елемент рисунка посилаються за його відносним положенням, наприклад, "на фотографії вище" або "як показано на наступному рисунку", то переміщення рисунка порушить зміст сторінки. Авторам рекомендується розглянути можливість використання підписів для посилання на рисунки, а не таких відносних посилань, щоб сторінку можна було легко змінити, не впливаючи на її зміст.

<figure>
  ...
</figure>

<figure>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Sunflower_from_Silesia2.jpg/800px-Sunflower_from_Silesia2.jpg" alt="Соняшник під блакитним небом">
  <figcaption>Соняшник під блакитним небом.</figcaption>
</figure>

img {
  max-width: 100%;
}