はじめに

学んだことを忘れないように備忘録として残しています

初学者のうちはimgタグをdivタグで囲うように教わっているかと思います。
しかし実務ではpタグやfigureタグで囲うのが一般的のようです。
その理由やタグの使い分けについて解説していきます。

そもそもなぜimg単体で使ってはいけないのか？

結論、レイアウトの調整等がしにくいから。

imgタグはインライン要素のため、他のブロック要素と並べると想定通りの配置が難しいことがあります。
そこでdivで囲むことで、親のブロック要素に対する位置やサイズを調整しやすくなります。特に、中央揃えや幅・高さの制限が必要な場合に便利です。

p（段落）タグで画像を囲うのは、画像がその段落に含まれる内容の一部である場合に適しています。
例えば文章の中で参照される画像を含む場合、つまり文脈上必要になってくる画像の場合pタグで囲うのが良いと言えます。

figureタグは、画像や図、イラストなど、文書中の独立したコンテンツとして扱いたい場合に使用されます。
つまり文脈上必要で無い画像の場合にfigureタグを使うイメージで良いかと思います。

文章中で意味を持つ画像はpタグ、意味を持たない画像はfigureタグで囲むことを推奨します。