img(イメージタグ)を何で囲うのが正解か問題をマジで考える 名古屋でホームページ制作ならCatworkWeb

img(イメージタグ)を何で囲うのが正解か問題をマジで考える

Webコードを解読していると、 「<img>をそのまま補置する」人、 「<div>や<p>で囲む」人、意見が分かれる。
結局、何が正解なのか？　これを真面目に考える。

あくまで、Catwork株式会社の見解として書かせていただくので、会社によって考え方が異なることは十分に織り込んでいただければと思う。

選択肢としては、下記。

• imgタグを単体で使用する
• divタグで囲む
• pictureタグで囲む
• figureタグで囲む
• pタグで囲む
• cssで入れる

imgタグを単体で使用する

結論、弊社では非推奨。
理由としては、imgタグは単体で「画像」という定義を持つが、本来インライン要素であるため、ブロックレベル要素の中で使用するのが正しいため。
html5以降、インライン、ブロックレベルという考えが廃止されたので、ここを汲み取らないのであれば、単体使用を正しいとする考え方もあると思うが、弊社では採用しない。
また、ブロックレベル要素で囲っておいた方が扱いやすいから、というのももちろんある。
ちなみに、ChatGPT君の見解だと、<img>だけで「センタンスを持つコンテンツボックス」として成立するから正しい。という肯定の見解。ただ、うちでは採用しない！

divで囲む

結論これも非推奨。
よく使われる記述だが、<div>は意味を持たないブロックレベル要素、かつ、cssをあてるときに、複数のブロックレベル要素をひとまとめにして使用するものという位置づけなので、<img>をブロックレベル要素で囲って扱いやすくするという用途は適切ではない。
もし、そのような用途で扱うのであれば、<img>をdisplay:block;でブロックレベル要素化したほうが、htmlの記述を節約できるし、弊社では<div>も採用しない。

pictureタグで囲む

場合により推奨。
<picture>タグは<source>を使用することでデバイスの横幅により画像の切り替えが出来るタグですが、html的な定義づけの観点からすると、あまり明確な意味はないらしい。
ブロックレベル要素なので、<img>を単独で囲うには良いと思う。
ただ、元々の使用用途が、デバイスでの画像切り替えなので、<source>を使わず、単独で使用するということは非推奨かな？一応<source>を0個以上というルールらしく、<source>を使わず、単独で使おうと思えば使えるらしい…。
<picture>の中では、<img><source>のみが使用可能なので他のタグは使用しないように注意。下記のような使用はOK。

<section class="cont01">
 <h2>タイトル</h2>
 <p>テキストテキストテキスト</p>
 <picture>
  <source srcset="photo-large.webp" type="image/webp" media="(min-width: 768px)">
  <source srcset="photo-small.webp" type="image/webp">
  <img src="photo-small.jpg" alt="スタッフ集合写真">
 </picture>
</section>

figureタグで囲む

場合により推奨。文章の隣に置いてある四角い画像なんかはこれでOK。
<figure>は、図表などの自己完結型のコンテンツを表す。任意で <figcaption> 要素を使用して表されるキャプションを付けることができまる。<figcaption> は使わなくても別にOK。

<section class="cont02">
 <h2>タイトル</h2>
 <p>テキストテキストテキスト</p>
 <figure><img src="photo-small.jpg" alt="スタッフ集合写真"></figure>
</section>

ただ、<p>を使用する方がhtml的に推奨だと考えられる場合もあるので、注意。

figureでpictureを囲むのはOK？

結論OK。だけど弊社では非推奨。
図表というhtml的な定義づけも出来てhtml的な見方からすると大変良い。
ただ、タグが無意味に多くなるのと、<picture>単体でも何も問題ないため、使ってもいいけど、使わなくてもいい。わざわざ入れるのがめんどくさいから使わなくていい。という感じ。
無駄なタグが増える。下記のような形だね。

<section class="cont03">
 <h2>タイトル</h2>
 <p>テキストテキストテキスト</p>
 <figure>
  <picture>
   <source srcset="photo-large.webp" type="image/webp" media="(min-width: 768px)">
   <source srcset="photo-small.webp" type="image/webp">
   <img src="photo-small.jpg" alt="スタッフ集合写真">
  </picture>
 </figure>
</section>

pタグで囲む

今まで弊社では<img>は、<p>で囲うことを推奨していたが、今後は、状況により<figure>や<picture>を使用するようにする。ただ、<p>も用途が残っており、文章の中で、画像を使っていたり、文字を画像にしていたりする場合は<p>を使用することとする。

例えば、headerで言えば、ロゴ、電話番号が画像の場合、CONTACTのボタンが画像の場合などは今まで通り<p>を使用する。文章構造として、altの中のtextに置き換えて不自然ではないときは<p>かなという見解です。

cssで入れる

明らかに飾りの画像など、文章構造上重要でない画像は<img>は使用せず、cssのbackgroundや、疑似要素等で入れることを推奨しています。

imgタグ(イメージタグ)を何で囲うのが正解かまとめ

意味のある画像は、上記で書いているように、<p><figure><picture>などで囲って、<img>タグを使用しましょう。使い分けに関しては、上記を参照してください。

デバイスで切り替えたいときは<picture>
図表、単独で成立する画像の場合は<figure>
その他、文章に置き換えれる画像、テキストを画像化してるものは<p>
意味の薄い画像はcssで入れる
<img>の単体使用、<div>はNG