<figure>
<img
src="https://image.hirameki.dev/takasqr/image/upload/v1712091289/serif_0030_olddgo.webp"
/>
<figcaption>同じサイズだが、遠くから見ると読みやすさが変わる</figcaption>
</figure>
このコードがやっていること
<figure>- 画像や図表など、「ひとまとまりのコンテンツ」を表す要素
- 本文から切り離しても意味が通じる要素に使う
<img>- 実際に表示する画像
<figcaption>- 画像に対する説明文(キャプション)
- 画像と意味的に結びつく