#html_in_action
Отже, вам терміново потрібно додати до статті ілюстрацію з підписом. Не знаю, для чого, просто дуже треба.

Ваша перша реакція:

<div class="illustration">
  <img src="…" />
  <p class="description">…</p>
</div>

Якщо це так — зупиніться! В HTML5 уже давно існує спеціальна семантична конструкція figure + figcaption!

За визначенням в специфікації figure це контейнер для автономного вмісту, який можна вийняти з основного потоку тексту без втрати сенсу. Тобто це має бути ілюстрація, що доповнює документ, але не є його ключовою частиною. А figcaption — це підпис до цього вмісту.

<figure>
  <img src="…" />
  <figcaption>…</figcaption>
</figure>

Порядок, до речі, неважливий: підпис може йти як перед вмістом, так і після — головне, щоб він був першим або останнім елементом всередині відповідного figure. Відсутність figcaption, до речі, допускається.

Як допускається й вкладення figure у figure:

<figure>
  <img src="…" />
  <figcaption>…</figcaption>

  <figure>
    <img src="…" />
    <figcaption>…</figcaption>
  </figure>
</figure>

Проте, якщо ви вкладете два figcaption в один figure, то на вас насвариться валідатор, бо підпис до ілюстрації має бути лише один. Бо екранні читалки трактують figcaption як пояснення до вмісту.

Щодо вмісту, то "ілюстрацією" може бути що завгодно, хоч текст, хоч відео, хоч код.

Чому ви досі не втисли вподобайку цьому допису, я вас питаю?

Ну і, звісно, не варто плутати figcaption з caption в таблиці. Це геть інший елемент зі своєю поведінкою та семантикою.

І ось вам ще бонус — як додати наскрізну нумерацію до ілюстрацій на кшталт "Рисунок 2.1 Реакт-абізяна в природі":

<figure>
  <img src="react-monke.jpg" />
  <figcaption>
    Реакт-абізяна в природі
  </figcaption>
</figure>

:root {
  counter-reset:
    section-counter,
    item-counter;
}

section {
  counter-increment: section-counter;
}

figure {
  counter-increment: item-counter;
}

figure::before {
  content: "Рисунок. "
    counter(section-counter)"."
    counter(item-counter);
}

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

🌐 MDN: figure
🌐 MDN: figcaption
🌐 MDN: Using CSS counters

@babichdev

Якщо ви негайно розішлете цей допис 10 знайомим, то у вас буде щастя, здоровля і синьйорська зарплата.

P.S. До речі, згідно правил української мови, слово "рисунок" — правильне. Просто його треба використовувати в правильному значення. Розрізняти "рисунок" від "малюнка" дуже просто — перший це зображення, утворене рисками, штрихами, а друге — мальоване, фарбоване. Отака хвилинка філології.