imgタグは何で囲むのが良いか

質問

皆さんはimgタグは何で囲んでいますか？

<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト</p>
<img src="xxxx.jpg" alt="">
</div>

例えばこういうような時に、何で囲むべきかというのをいつも迷います。

ブロック要素で囲むべきである、というのは何となく認識していますが、ここをdivで囲むのも何か違うような気がするし、
pで囲むのも「段落」と見なせるような画像でないと何となく気持ち悪いです。
最近はaltのある画像は「これは段落だろう」と自分を納得させてpで囲み、
altを空にしているものは囲まずにそのまま置いたりしています。
レイアウト上、ブロック要素が必要になった時にはdivで囲んでみたり…。

私はイメージ的な画像（情報としては必要ない画像や、直前のテキストとかぶっている画像文字等）にはあえてaltは付けずに空にすることが多いので、ちょいちょいこういう事で迷います。

スマートなやり方をご教授ください。

回答No.2

ORUKA1951 · ベストアンサー

＞「alt="---------"」と入れるくらいなら「alt=""」の方が良いのではないでしょうか？
　そうです。そもそも、文字(内容)を画像に置き換えてしまうのは、感心できない手法ですが、味気ないHRの代わりに画像ラインを入れる手法はかっては行われていました。もしHRの代わりに画像を入れるのでしたら、このように書くべきと言っているのである---画像に置き換えて記述するのは誤りと言うことを言いたいのです。

＞この写真にaltで候補者名を入れてしまうと、画像が見れない環境の人に対しては候補者が2回表示（もしくは読み上げ）されることになります。
　その場合は、
・altをalt=""としておく
・alt="山田太郎の正面からの写真"
　あるいは、alt="本人の写真"
　と画像が表示されない人も画像から得られるはずの情報をいれておく。

　になるでしょうね。

<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト</p>
<img src="xxxx.jpg" alt="">
</div>
　これは、書きましたが、Validator上はエラーになりませんが、やはり間違いなのです。この場合、ここに仮想的なブロックが存在するとしてDOMを構成しますが、その処理はHTML4以前は決まった解釈が定められていなかったために解釈上差が出てしまう可能性があります。

気が進まないが
<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト<br>
<img src="xxxx.jpg" alt="">
</p>
</div>

とか
<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト</p>
<p><img src="xxxx.jpg" alt=""></p>
</div>
それは、その画像がどのような段落にあるのかによって判断します。DIVはDIVで目的・用途があります。文法上のエラーを回避するため、単にデザインのためのような使い方は極力避けるほうがよいと思います。それは、突き詰めればHTMLで文書構造を正確にマークアップしすること、最終的にメンテナンスしやすい結果になるからです。

　<p class="figure main">
　　<img src="" width="" height="" alt="麓から見た紅葉の城山">
　</p>
　<p>紅葉も終盤を迎えた先週、子供達を連れて近所の城山にハイキングに言ってきました。</p>
　<p class="figure sub">
　　<img src="" width="" height="" alt="玄関で見送る妻">
　</p>
　<p>
　　妻は、このような山歩きなど、実利がないものには付き合ってくれない。昔は・・
　</p>
このように書かれていると、後で写真を一枚追加したいときに前後を見ればどのようにマークアップすればよいかわかりますし、スタイルシートを書く際も、
*.figure{margin:10px;text-align:center;}
*.figure.sub{float:right;}
*.figure img{padding:5px;border-shadow:10px 10px 10px rgba(0,0,0,0.4);}
とか・・

お礼

度々回答ありがとうございます。

> alt="山田太郎の正面からの写真"
> あるいは、alt="本人の写真"

確かにこうすれば、<p></p>で囲むのに抵抗は無くなりますが、
やはりpで囲みたいがために無理やり入れた文字のように思えます。
音声ブラウザやテキストブラウザ閲覧者からは、「ここに本人の写真がある」「正面を向いている」というような情報は不要だからです。
特に音声ブラウザは読み上げに時間がかかるので、不要な文字情報は極力省くべきだと思っています。
alt="〇〇の写真" という表現は、昔見た本などでも紹介されていたので知っていますが、altの目的からは不適切ではないかと思っています。

また、別の問題として、情報としての意味をなさないイメージ画像に毎回文字を入れるのはSEOスパムにもつながるのではないかと思い、乗り気になれません。
私はSEOの専門ではないので的外れかもしれませんが、例えばスキンケア商品のページで水滴が水面に落ちる写真素材を使ったとして、
alt="水滴の写真" は不要な文章ですし、alt="〇〇（商品名）は、まるで水滴が水面になじむように、お肌に浸透します。"などとするのはSEOテクニックのようで、好ましくないような気がします。
という事で、私はこういう場合には alt="" を使います。

その方法が正しいかどうかはひとまず置いといて、
空のaltを設定したimgタグをどう配置するか、という問題に対しては
スマートな方法は無く、気が進まない方法しか無いという事が結論のようですね。

ブロック要素で囲むには<div></div>か<p></p>しかなく、
そのどちらもとても適切とは言えないが、<div></div>よりは<p></p>の方がマシだろう、
という所でしょうか。

素で置くのは好ましくないという事はわかりました。

回答No.4

神崎 渉瑠（@taloo）

>スマートなやり方をご教授ください。
ひと言で言えば、臨機応変 (◦´꒳`◦)ドヤァ

http://www.w3.org/TR/html5/the-img-element.html#the-img-element
<img>の使い方（どのタグで囲むのか）として、様々な方法が書かれています。

HTML4では<p><img></p>というならびが推奨されると思いますが、
もともと<img>は<object type="image/***"></object>の短縮形ですから、<p>に入れなければならないというわけでもないと思います。

---------------
他に適切な要素が無ければ<p>を使うというのがいいと思いますが、
http://www.w3.org/TR/html5/the-p-element.html#the-p-element
<p>要素解説の最後、
段落の中に他の要素が入る場合、<p><ul><p>というならびにしても良いし、<p>をやめて代わりに<div>を使用する方法でも良い、とあります。
（そもそも日本語や英語の文法（１つの文（段落の一部）の中に箇条書きが入ることがある）とHTMLの文法（段落の中に箇条書きを入れては行けない）に矛盾があるため、他にやり方が無いというのも理由の一つです。）

HTML4、XHTMLは文書（文字によるもの）を基準として作られた文法/仕様ですが、
HTML5で作られる文書は文字とは限りませんし、それが段落とは限らないと思います。
それ（段落ではない"ブロック要素"）に対して、最小単位である<p>を使っても良いし、汎用要素である<div>でも良いし、だと思います。

お礼

回答ありがとうございます。
やはり臨機応変…なんですね。
まだリンク先に目を通せていませんが、回答を参考に勉強させていただきます。

回答No.3

ORUKA1951

＞確かにこうすれば、<p></p>で囲むのに抵抗は無くなりますが、
やはりpで囲みたいがために無理やり入れた文字のように思えます。

　そうではなくて、画像が利用できないユーザーのために代替テキストを書くのです。画像を使うということは、テキストよりも画像のほうが一目瞭然に情報が伝わるために画像を入れるのですから、本来は代替テキストが入るはずです。
　逆に言うと、そうでない画像は背景でよいのです。
・alt = text [CS] ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/objects.html#adef-alt )
・B.9 アクセス性に関する注意 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/appendix/notes.html#accessibility )
・6. ウェブコンテンツ・アクセシビリティ・ガイドライン ( http://www.zspc.com/documents/wcag10/#gl-provide-equivalents )

　これらを読まれると多分答えは見出せると思います。画像が情報を提供するものなら、基本的には長くてもよいので画像が利用できないユーザーのための情報があるのではないか？？
　それであっても、たとえば写真集のようなサイトでは、どう考えても画像を利用できないユーザーは訪問しないために代替テキストを用意する必要はないとも言えます。

　一律なルールを杓子定規に適用するのではないと思います。先に補足された
「右側には選挙区ごとに候補者が並んでいて、写真と名前があります。」
　ですが、もしこのページが視覚障害者の訪問を考慮しなければならないのでしたら、写真に変わるテキスト--もちろん長文になるかもしれませんが---が入るほうが良いかもしれません。・・・私はしないでしょうが(^^)

＞ブロック要素で囲むには<div></div>か<p></p>しかなく、
そのどちらもとても適切とは言えないが、<div></div>よりは<p></p>の方がマシだろう、
という所でしょうか。

　それはその通りでしょう。
「divは他に適切な要素がないときに、最後の手段としてのみ使用する」
　--- http://www.w3.org/TR/2011/WD-html5-20110525/grouping-content.html#the-div-element のNOTE:参照

　もちろん、写真の説明などが入る場合は、DIV以外選択肢はありません。HTML5ではそのような用途でfigure /figcaption要素が追加されましたから悩まず
<figure>
　<img src="" width="" height="" alt="">
　<figcaption></figcaption>
</figure>
　のようなマークアップができます。

お礼

回答ありがとうございます。
まだリンク先に目を通せていませんが、回答を参考に勉強させていただきます。

回答No.1

ORUKA1951

その画像がどのような段落であるかで決まると思いますが？？？なぜ悩まれるのかわかりません。
<div class="header">
</div>
<div class="section">
　<h2>近所の山に出かけました</h2>
　<p class="figure main">
　　<img src="" width="" height="" alt="麓から見た紅葉の城山">
　</p>
　<p>紅葉も終盤を迎えた先週、子供達を連れて近所の城山にハイキングに言ってきました。</p>
　<p class="figure sub">
　　<img src="" width="" height="" alt="玄関で見送る妻">
　</p>
　<p>
　　妻は、このような山歩きなど、実利がないものには付き合ってくれない。昔は・・
　</p>

＞altを空にしているものは囲まずにそのまま置いたりしています。
<div class="section">
　<p>その場合も、文法上の制約からエラーにならなくてもブロック要素で囲むべきです。
　良くあるのが罫線代わりに画像を使用する場面です。</p>
<p class="horizontalRule"><img src="" width="" height="" alt="---------">
　<p>
　　さて・・
　</p>

とか・・まあ、あまり良い使い方ではないですが。<hr>でマークアップしてスタイルシートで画像に置き換えるべきでしょう。

＞私はイメージ的な画像（情報としては必要ない画像や、
　背景ないし、<p></p>で囲み代替文字を入れる。
＞直前のテキストとかぶっている画像文字等）
　たとえそうであっても・・・・

<section>
　<h2>近所の山に出かけました</h2>
　<figure class="main">
　　<img src="" width="" height="" alt="麓から見た紅葉の城山">
　</figure>
　<p>紅葉も終盤を迎えた先週、子供達を連れて近所の城山にハイキングに言ってきました。</p>
　<figure class="sub">
　　<img src="" width="" height="" alt="玄関で見送る妻">
　</figure>
　<p>
　　妻は、このような山歩きなど、実利がないものには付き合ってくれない。昔は・・
　</p>
ですかね。

＞ブロック要素で囲むべきである、というのは何となく認識していますが、
　imgはインライン要素ですから、必ずブロック要素内になければなりません。もちろん、
　<p>なんたらかんたらは<img alt="↑">のような場合もあるでしょう</p>

＞ここをdivで囲むのも何か違うような気がするし、
　この場合が、段落になるか、行内要素であるかによりますが、divは基本的に他に適当なタグがないときに使用したり、複数のブロック要素を意味的に括るときに使用しますが、原則としてclass名を併用するはずです。上記の<p class="figure"></p>はその内部にひとつの段落しかないからでしすし、複数のブロックがあれば
<div class="figure">
　<p><img src="" width="" height="" alt=""></p>
　<p>コメント</p>
</div>
　ならdivでしょう。

お礼

回答ありがとうございます。

> 私はイメージ的な画像（情報としては必要ない画像や、
　背景ないし、<p></p>で囲み代替文字を入れる。

要は、「基本的に<p></p>が適していて、その際には必ずaltが必要。altを入れないなら背景にすべき。」
という事でしょうか。

> <p> class="horizontalRule"><img src="" width="" height="" alt="---------"><p>

こういう使い方はやったことが無いですが、
「alt="---------"」と入れるくらいなら「alt=""」の方が良いのではないでしょうか？
「alt="---------"」に対して、テキストブラウザや音声ブラウザがどう読むのかはわかりませんが、無意味なaltは不適当な気がしますし、
「<p></p>で囲みたいから、例え不要でもaltには何か入れたい」というのは本末転倒な気がします。
ユーザビリティの為にルールがあるのであって、ルールの為にユーザーに不便を押し付けるのはちょっと…という感じで。

また、挙げて頂いた登山の文章例は非常によくできていて、写真が見れない人もaltの内容に違和感は感じませんが…
例えば、こういうサイトの場合（ikesaiから適当に選んだだけで、政治的な意味はありません）
http://special.jimin.jp/
右側には選挙区ごとに候補者が並んでいて、写真と名前があります。
この写真にaltで候補者名を入れてしまうと、画像が見れない環境の人に対しては候補者が2回表示（もしくは読み上げ）されることになります。
altを入れたくないからと言って、背景にするような内容ではありませんし、
この場合にはimgで配置した上で「alt=""」が正しいと個人的には思います。
※リンクイメージなので実際には不適当ですが、リンクが無かったとして…
※このサイトでは<div></div>で配置しているようです。

話しがそれましたが、要は「imgタグで配置」「altは空が適切」という状態はどうしても出てくるのでは、という事です。
その場合には<p></p>を使うべきではないのか、上記に挙げたサイトのように<div></div>を使うのか…
と言う点に悩んでいます。

ちなみに、最初に挙げた例の下記の場合、

<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト</p>
<img src="xxxx.jpg" alt="">
</div>

imgは周りの<div></div>の中にあるのだから、
> imgはインライン要素ですから、必ずブロック要素内になければなりません。
これを満たしている、と考えられるわけではないですかね？