imgタグはdivで囲う？p？figure？picture？プロの使い分けまとめ

そこのあなた、divタグ乱用してませんか？

とりあえずdivタグでまとめたい気持ちは分かりますが、タグにはそれぞれ役割と使うタイミングが存在します。

今回は画像を組み込む際に使う<img>の周辺タグのお話です。

<img> をどの要素で囲うかは、見た目ではなく「意味（セマンティクス）」で決めるのが基本です。適切な要素を選ぶと、アクセシビリティ・SEO・保守性が上がります。

pで囲う：段落の一部としての画像

<p> は段落（文章のまとまり）です。文章の中でアイコン的に画像を使う場合は自然です。

<p>
  <img src="icon-warning.svg" alt="注意">
  入力内容を確認してください。
</p>

注意：画像単体をpで囲むのは避ける

画像だけを <p> に入れると「画像＝段落」という意味になり、文書構造として不自然になりがちです。画像が独立した要素なら figure、単なる箱なら div を使うのが無難です。

<!-- 非推奨になりやすい例 -->
<p><img src="hero.jpg" alt=""></p>

figureで囲う：コンテンツとして独立した画像

記事内の図表・スクリーンショット・写真など「本文とは独立した参照対象」になる画像は <figure> が適しています。キャプションを付けるなら <figcaption> を使います。

<figure>
  <img src="graph.png" alt="2024年の売上推移を示す折れ線グラフ">
  <figcaption>図1：2024年の売上推移</figcaption>
</figure>

SEO/アクセシビリティ上、「これは図です」と宣言できる
キャプションを正しくマークアップできる
ブログ・オウンドメディアでは基本これが第一候補

pictureを使う：画像の出し分け・最適化

<picture> は「画像をどう出すか」を制御するための要素です。 WebP/JPEGのフォーマット切替や、画面幅（メディアクエリ）で画像を出し分けたいときに使います。なお、内部には必ず <img>（フォールバック）が必要です。

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="商品画像">
</picture>

よくある実務の組み合わせ：figure + picture

「コンテンツとしての図（figure）」と「最適化（picture）」は役割が違うので、併用すると意図が明確になります。

<figure>
  <picture>
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="新商品イメージ">
  </picture>
  <figcaption>新商品イメージ（WebP対応）</figcaption>
</figure>

実務で迷ったときの判断フロー

その画像は本文から独立した参照対象（図・写真・スクショ）？ → YESなら figure
キャプションが必要？ → figcaption を付ける
フォーマット切替やレスポンシブ出し分けが必要？ → picture を使う（必要なら figure と併用）
文章の流れの一部（アイコン等）？ → p 内に置く
単なるレイアウト調整用の箱？ → div

まとめ

div：意味を持たないレイアウト用コンテナ
p：文章の一部として自然に混ざる画像（主にアイコン）
figure：独立したコンテンツとしての画像（ブログ記事の基本）
picture：画像の出し分け・最適化（WebP/レスポンシブ）

迷ったら「その画像は何者か（役割）」で決めるのがプロの流儀です。見た目の調整はCSSで、意味構造はHTMLで、役割分担を分けると運用が楽になります。