画像はDIVタグとPタグの両方で囲むの？

質問

クラブのホームページを作っているんですが
分からない事がありますので質問させていただきます。

勉強している本で画像もPタグで囲むのが正しいと載ってましたので
-------------------------------------------------------
<div><p><img src="○○" alt="なし"></p></div>
-------------------------------------------------------
と記述していたんですが、
色々勉強していくとPタグではなく、
ブロックレベル要素で囲むのが正しいとの事ですので
<div>も<p>もブロックレベル要素なので
-------------------------------------------------------
<div><img src="○○" alt="なし"></div>
-------------------------------------------------------
とか
-------------------------------------------------------
<p><img src="○○" alt="なし"></p>
-------------------------------------------------------
みたいに無理に<div>と<p>の2つではなく
<div>だけ、または<p>だけで、囲むのも問題はないのでしょうか？

※スタイルシートでレイアウトしています。
※画像はスペースを空ける為だけですので<div>～</div>に文章はありません。
　同じくaltの指定もしていません。
※画像でスペースを空けるは、あまり良くない事は分かっていての質問です。

別の質問ですけど、あるホームページでH2（見出しタグ？）で
-------------------------------------------------------
<div><h2>タイトル</h2></div>
<div><p>文章</p></div>
-------------------------------------------------------
が正しいと載っていたんですが
-------------------------------------------------------
<div>
<h2>タイトル</h2>
<p>文章</p>
</div>
-------------------------------------------------------
では間違っているんでしょうか？

すいません、もう1つ質問です。
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
でチェックしてみると98点でした。
私のパソコンや、友達のパソコンでは、ちゃんと表示されてるんですが
100点じゃないと、表示されないパソコンもあるんでしょうか？

学校が短大で男子がいないので
HTMLやCSSが苦手な子ばかりです。
私と副部長で頑張ってほぼ完成しましたが、
はじめてホームページを作った初心者で
細かい事を教えてもらえる人がいなくて困ってます。
初心者の質問で申し訳ありませんが
よろしくお願いします。

回答No.5

cybershoot

divはブロック要素をグループ分けするためのものですので、
divの中にブロック要素が1つしか入っていないとか、
divの中に直接インライン要素が入っているというのは
あまり望ましくありません。

例えば

<h1>アイススプレー【使用上の注意】</h1>
<p>使用前に次の説明を必ずお読みください。</p>
<h2>してはいけないこと</h2>
<p>守らないと現在の症状が悪化したり、副作用が起こりやすくなる。</p>
<p>次の部位には使用しないこと。</p>
<ul>
　<li>目や目の周囲、粘膜。</li>
　<li>湿疹。</li>
　<li>湿潤、ただれ、亀裂や外傷のひどい患部</li>
</ul>
<h2>相談すること</h2>
<ul>
　<li>次の人は使用前に医師または薬剤師に相談すること
　　<ul>
　　　<li>医師の治療を受けている人。</li>
　　　<li>乳幼児。</li>
　　　<li>本人または家族がアレルギー体質の人。</li>
　　　<li>患部が顔面または広範囲の人。</li>
　　</ul>
　</li>
　<li>次の場合は、直ちに使用を中止し、この容器を持って医師または薬剤師に相談すること
　　<ul>
　　　<li>使用後、次の症状が現れた場合
　　　　<table>
　　　　　<caption>注意すべき症状と関係部位</caption>
　　　　　<tr>
　　　　　　<th>関係部位</th>
　　　　　　<th>症状</th>
　　　　　</tr>
　　　　　<tr>
　　　　　　<td>皮膚</td>
　　　　　　<td>
　　　　　　　<ul>
　　　　　　　　<li>発疹・発赤</li>
　　　　　　　　<li>かゆみ</li>
　　　　　　　　<li>かぶれ</li>
　　　　　　　　<li>はれ</li>
　　　　　　　　<li>刺激感</li>
　　　　　　　</ul>
　　　　　　</td>
　　　　　</tr>
　　　　</table>
　　　</li>
　　</ul>
　</li>
</ul>

文章はダマリンアイススプレーの説明書きから引用です。
で、これをdivを使って「どこが区切れ目なのか」をわかりやすくします。

<div id="page">
　<h1>アイススプレー【使用上の注意】</h1>
　<p>使用前に次の説明を必ずお読みください。</p>
　<div id="section1">
　　<h2>してはいけないこと</h2>
　　<p>守らないと現在の症状が悪化したり、副作用が起こりやすくなる。</p>
　　<p>次の部位には使用しないこと。</p>
　　<ul>
　　　<li>目や目の周囲、粘膜。</li>
　　　<li>湿疹。</li>
　　　<li>湿潤、ただれ、亀裂や外傷のひどい患部</li>
　　</ul>
　</div>
　<div id="section2">
　　<h2>相談すること</h2>
　　<ul>
　　　<li>次の人は使用前に医師または薬剤師に相談すること
　　　　<ul>
　　　　　<li>医師の治療を受けている人。</li>
　　　　　<li>乳幼児。</li>
　　　　　<li>本人または家族がアレルギー体質の人。</li>
　　　　　<li>患部が顔面または広範囲の人。</li>
　　　　</ul>
　　　</li>
　　　<li>次の場合は、直ちに使用を中止し、この容器を持って医師または薬剤師に相談すること
　　　　<ul>
　　　　　<li>使用後、次の症状が現れた場合
　　　　　　<table>
　　　　　　　<caption>注意すべき症状と関係部位</caption>
　　　　　　　<tr>
　　　　　　　　<th>関係部位</th>
　　　　　　　　<th>症状</th>
　　　　　　　</tr>
　　　　　　　<tr>
　　　　　　　　<td>皮膚</td>
　　　　　　　　<td>
　　　　　　　　　<ul>
　　　　　　　　　　<li>発疹・発赤</li>
　　　　　　　　　　<li>かゆみ</li>
　　　　　　　　　　<li>かぶれ</li>
　　　　　　　　　　<li>はれ</li>
　　　　　　　　　　<li>刺激感</li>
　　　　　　　　　</ul>
　　　　　　　　</td>
　　　　　　　</tr>
　　　　　　</table>
　　　　　</li>
　　　　</ul>
　　　</li>
　　</ul>
　</div>
</div>

必要に応じてid、class、title属性をつけます。
これがdivの使い方です。

>私のパソコンや、友達のパソコンでは、ちゃんと表示されてるんですが
>100点じゃないと、表示されないパソコンもあるんでしょうか？

100点じゃないとダメというものではありません。
むしろ100点を取れるケースは稀で、
XHTMLであれば80点くらいになるのが普通です。
（XML宣言を書かないと80点くらいになる）
重要なのは点数ではなく何で減点されているかです。

HTML-lint以外のHTMLチェッカーも試してみではどうでしょうか。
http://validator.w3.org/
http://harel.nttdata.co.jp/wact/inputProc/inputUrlBL.do

参考URL：

http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html

回答No.4

yuu_x

> 勉強している本で画像もPタグで囲むのが正しいと載ってましたので
body 直下に img は直接置けないって話じゃないかな。

それぞれの要素には下における（子孫にできる）要素が決まってるのでそれに気をつければいいと思います。その辺も、
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
ではじいてくれると思いますので、

詳しく知りたいときは DTD 読むしかないかな。うまくまとまってるサイトがあるといいんですけどね。

> <div><h2>タイトル</h2></div>
> <div><p>文章</p></div>

IE の互換モードを考慮したレイアウトの話？
IE の互換モードでは、width を指定した状態で margin, border をつけるとレイアウトが崩れるので、margin, border は div の方につけてやればブラウザ間で統一ができる。

DOCTYPE をDTD付きで指定してやれば、IE でも標準モードになるので、それほど気にしなくてもいいと思います。（例外については省略）

> チェックしてみると98点でした。
98 なら上等です（残り 2 点の内容にもよりますが）。#3 でも指摘していますが、W3C に対応しきれていない（する気がない）ブラウザでは、100点にしてしまうとうまくいかない状況も出てきてしまいます。

なるべく 100点に近づけて、うまくいかないブラウザは、一番影響の少ない方法で代替案を考える。が健全じゃないかな。

最悪構文エラーを出さないようにしてやればよいと思います。
ブラウザを音声で見る人や、キーボードで操作する人等まで考慮されているので、参考にされるといいと思います。

# パーサがすべて正確にパースしてくれるとも限らないので、XHTML と HTML の混在は避けたほうがいいですね。

> alt="なし"
alt 属性は、画像が表示できないときに変わりに表示されるものなので、alt="なし" と書くくらいなら何も指定せず alt="" としたほうがいいですね。「なし」と表示されても、見ている側は何のことだかわかりませんし。

そのへん実は HTML 5 から、詳しくガイドラインが引かれていて、alt="" とした場合、その画像が装飾またはドキュメントに影響しない補足的なものとされています。

[quote]
If the src attribute is set and the alt attribute is set to the empty string

The image is either decorative or supplemental to the rest of the content, redundant with some other information in the document.

If the image is available and the user agent is configured to display that image, then the element represents the image specified by the src attribute.

Otherwise, the element represents nothing, and may be omitted completely from the rendering. User agents may provide the user with a notification that an image is present but has been omitted from the rendering.
[/quote]
cite : http://www.whatwg.org/specs/web-apps/current-work/#attr-img-alt

回答No.3

神崎 渉瑠（@taloo）

<div>は、「他の部分と区別したいところに目印として付けるタグ」です。
<p>は段落を意味します。

> 別の質問ですけど、あるホームページでH2（見出しタグ？）で
> （略）
> では間違っているんでしょうか？

どちらとも言えません。

何らかの理由で区別したいのであれば、<div>を付ける方が正しいと思いますし、
区別する必要もないのに<div>を使うのであれば間違ってると思います。

ですので、
> <div>だけ、または<p>だけで、囲むのも問題はないのでしょうか？
これも同様に、
<div>だけや<p>だけの方が良いこともありますし、<div><p>とする方が良いこともあります。
これは作者がどのように考えるか、ということだけで、どちらが良いか決まると思います。

たとえば私なら、小説の挿絵ならこの様に書きます。
<div>
<p>段落1</p>
<p>段落2</p>
<img src="挿絵">
</div>

もしくは。

<div>
<p>段落1</p>
<p>段落2</p>
</div>
<div>
<img src="挿絵">
</div>

挿絵でなく本編の一部（写真アルバムなど）なら<p>にするかもしれません。

<div>
<p>段落1</p>
<p>
<img src="写真">
</p>
</div>

もしくは。

<div>
<p>段落1</p>
</div>
<p>
<img src="写真">
</p>

> 100点じゃないと、表示されないパソコンもあるんでしょうか？
100点にすると表示されなくなることもあります。
学校の点数とは異なり、100点にすれば良いという物でもないのがHTMLです。

正解は1つじゃないです。

> ※画像はスペースを空ける為だけですので<div>～</div>に文章はありません。
>　同じくaltの指定もしていません。
>※画像でスペースを空けるは、あまり良くない事は分かっていての質問です。

alt=""という指定だけしておく方がいいと思います。

<div style="margin-bottom:200px;">などとして、
「可能であれば」スタイルシートでスペースを空ける方法をおすすめします。

回答No.2

nori_007

<p>とは何でしょうか、よく考えてみてください。
また、何でもかんでも<div>で囲む事も出来るだけ避けた方が良いと思います。<div>で囲む意味も考えてみてください。

>※画像はスペースを空ける為だけですので<div>～</div>に文章はありません。
　同じくaltの指定もしていません。

との事ですが、スペースを作る為に画像を入れると言う方法は、良い考え方ではありません。何の為に CSS を利用しているのでしょう。

例として

<p>文章文章文章文章文章文章文章文章文章文章</p>
<img src="space.gif" width="10" height="30" alt="">
<p>文章文章文章文章文章文章文章文章文章文章</p>

等としているので有れば、段落毎のスペースを確保する為の画像「space.gif」は不要です。

CSS を利用していますので、<p>タグにスタイル属性を与えて

p {
margin: 15px 0 15px 0;
}

とすれば良い。
上下に 15px のスペースが出来ます。
別の書き方では、以下の通りになります。意味は同じです。

p {
margin-top: 15px;
margin-bottom: 15px;
}

もし、全体の<p>タグに上記スタイル属性が反映されては困る場合。
例として、メインコンテンツとサブコンテンツとします。

メインコンテンツに関しては以下のようにします。

html
<div id="main">
<p>文章文章文章文章文章文章文章文章文章文章</p>
<p>文章文章文章文章文章文章文章文章文章文章</p>
</div>

css
#main p {
margin: 15px 0 15px 0;
}

とする。
段落毎に、上下15px 段落毎に 30px のスペースが空きます。

サブコンテンツの場合
html
<div id="sub">
<p>文章文章文章文章文章文章文章文章文章文章</p>
<p>文章文章文章文章文章文章文章文章文章文章</p>
</div>

css
#sub p {
margin: 5px 0 5px 0;
}

とする。
段落毎に、上下55px 段落毎に 10px のスペースが空きます。

id で main と sub に分け個々に <div> で囲み、p の属性を分けると言う考え方です。実際にソースを書いて違いを確認してみてください。

<div> に関しては、個々に囲むのでは無く、ざっくり大きなブロックに分けて、基本になる html のタグに id 毎の属性を与えると考えてみてください。

後は、clsss を設定して、<p>タグ個々に細かく、属性を与える方法もあります。
個人的にはメンテナンス性が下がるの余り好きな方法ではありません。
デザインに拘りを持つ方はよくしているのを見かけます。

以上参考にしてみてください。

Another HTML-lint gateway
の件に関しては、作成している html 文章のバージョンと、チェックをする html のバージョンが違えば大きな減点になると思います。

また、マイナス98点なら可愛いと思います。もし Another HTML-lint gateway を意識するので有れば、60点以上を目指してください。実は 100 点を取るのは難しくはありません。単なる文法チェックですので、指示に従い修正すれば100点に出来ます。

ブラウザには様々種類がある為、様々な制限をクリアーしてどのブラウザーでもほぼ同じように見えるように工夫すれば、Another HTML-lint gateway で減点になります。

現状では、文法の基本的な間違いを見つけ出すツールとして、60点からもし可能で有れば80点程度を目指せば良いと思います。

ちなみに、Another HTML-lint gateway で大きな減点でも、Windows の IE6 なら正常に表示出来てしまうかも知れませんが、モダンブラウザと呼ばれる、FireFox や、Google Chrome、Opera、Safari、IE7/IE8 ではデザインが崩れる可能性があると思います。

ご確認ください。

回答No.1

grumpy_the_dwarf

個別の要素をいちいちdiv要素で包む必要はありません。基本に
戻ってdiv要素の意味を確認してください。div要素は、文書構造を
明確に示すためのグループ化を担う要素だとされています。たとえ
ば、見出しや段落や箇条書きリストや画像で構成される文書の一部
をdiv要素でまとめて、「考察」という名前を付けるとかですね。

その意味では、h2要素とそれに続くp要素をそれぞれ別にdiv要素で
包むよりも、あなたのようにまとめて包む方が納得できます。しか
し、div要素に名前を付けないならそもそもdiv要素で包む意味は無
いですけどね。

もう一つの質問ですが、世間にはHTML-lintでマイナス数百点にな
るようなページがあふれています。たとえば
http://oshiete1.goo.ne.jp/qa5311621.html
この質問を教えてgooで見たものですが、HTML4.01 transitionalを
宣言しているのにxhtml風の間違った記法を混ぜ込む大ボケをかま
しているので、-284点です。それでも大抵のブラウザは適当に解釈
して表示してくれますから、あまり深刻に考えなくても大丈夫です
よ。それよりも、HTML-lintはあくまでも文法をチェックしている
だけであって構造は見てないことに注意してください。意味不明な
ことを書いても、文法で許容されるなら減点されません。