画像に説明文を書くときのHTML(figure / figcaption)

<figure>
  <img
    src="https://image.hirameki.dev/takasqr/image/upload/v1712091289/serif_0030_olddgo.webp"
  />
  <figcaption>同じサイズだが、遠くから見ると読みやすさが変わる</figcaption>
</figure>

このコードがやっていること

  • <figure>
    • 画像や図表など、「ひとまとまりのコンテンツ」を表す要素
    • 本文から切り離しても意味が通じる要素に使う
  • <img>
    • 実際に表示する画像
  • <figcaption>
    • 画像に対する説明文(キャプション)
    • 画像と意味的に結びつく