img タグ（ 画像 ）を p タグ などで囲む理由とタグの使い分け

こんにちは！ HARU（ @HARU ）です。

皆さんはブログ記事本文内の画像（ img タグ ）は p タグなどで囲んでいますか？

結論から言うと、基本的に 画像（ img タグ ）は p タグや div タグなどで囲むのが一般的です。

囲まなくても画像を表示するだけであれば、画面上問題はないように見えます。

しかし、p タグや div タグで囲んだことによるメリットを知れば、今後、囲むようになること間違いなしです！

今回はそんな画像をタグで囲む理由、囲むときはどんなタグを使うべきなのかというお話しをしたいと思います。

タグの役割

そもそもタグって何？という方向けの簡単な説明をします。

タグとは、“ そのもの ” が “ そのもの ” であるとコンピュータに区別させるためのものです。

私たちブロガー（ 筆者 ）はタグを用いずとも、文章を書いたときにそれが文章であることを認識し書くことができます。読み手（ 読者 ）も理解できるでしょう。

しかし、コンピュータからすればタグを用いていない文章は、ただの文字として認識されます。

したがって、コンピュータに「 これは文章ですよ 」などと認識させることが必要になります。それがタグの役割です。

画像をタグで囲む理由

冒頭で述べた通り、画像をタグで囲まなくても問題なく表示されるので、画面上見ることができます。

これは文章を p タグで囲まなくても読めます。というのに近いです。

それではなぜ、画像をタグで囲んだほうがいいのでしょうか。

それは Web ページのレイアウトを変更する上で、タグで囲んだほうが調整がしやすいからです。

例えば、ブログの横幅いっぱいにならない小さい画像を使用した場合、中心に表示したいと考えます。

そのとき、タグで囲んでいないと中心に表示することができません。

以下に例を示します。

タグで囲まない場合

画像をタグで囲まない場合、小さい画像をレイアウト中心に表示することができません。

無理やり、margin で調整することも可能かと思いますが……自分はやりたくないですね。

タグで囲む場合

画像をタグで囲む場合、小さい画像をレイアウト中心に表示することができます。

タグにクラスを付与することで、他の画像に影響を及ぼさないようにすることも可能です。

このように、画像をタグで囲むことでレイアウト調整が容易になります。

ちなみに上記例は、以下のような HTML 文と CSS から構成されています。

  
    <p class="img">
    <img 画像 />
    </p>
  

  
    #single-content p.img{
    text-align:center;
    }
  

画像は何のタグで囲むのがいいのか

今までの説明で、画像（ img タグ ）は何等かのタグで囲むほうがいいとわかりました。

それでは、何のタグで囲むのがいいのでしょうか。

調べた結果、記事本文内の画像（ img タグ ）は p タグ もしくは figure タグ で囲むのがいいとわかりました。

それでは、２つのタグをどのように使い分けるかの説明をしていきます。

文章中に置いて必要な画像は p タグ

文章中に表示させる画像が文脈上必要になってくる画像の場合 p タグ を使うことになります。

これは img タグに alt 属性を付与するかどうかとも繋がってくると思います。

alt 属性を付与するということは文脈上必要な画像であり、alt 属性付与 = p タグで囲むと認識してもいいかもしれません。

もちろん、alt 属性を付与しても文脈上必要で無い画像は p タグで囲むべきではありませんので、そこは適宜対応するようにしましょう。

文章中に置いて必要の無い画像は figure タグ

文章中に表示させるが文脈上必要で無い画像の場合 figure タグ を使います。

その画像があっても無くても問題ない場合、figure タグ を使うイメージでいいと思います。

例えばアイキャッチ画像などは figure タグで囲むことが推奨されますね。

それ以外の場面では

今までは記事本文内にて画像を囲むタグについて説明してきましたが、それ以外のレイアウト調整だけしたい場合などはどうしたらよいのでしょうか。

個人的にはブロック要素にすることができるdiv タグ を使い、レイアウト調整を行うのがいいと考えています。

元々、p タグ は段落の意味であり、figure タグ は画像や図形の意味として使用されます。

レイアウト調整だけの場合、意味を持たない div タグを使っておけば間違いないでしょう。

まとめ

画像（img タグ）も文章と同様に p タグなどで囲むことにより、レイアウト調整することが容易になるため、何等かのタグで囲んだ方がいいでしょう。

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

それ以外は div タグで囲めば間違いないかと思います。