XHTMLでは、インライン要素は必ずブロックレベル要素内に記述となっていますがこの場合は？

XHTMLについて教えてください。

XHTMLでは、インラインレベル要素は、必ずブロックレベル要素内で記述されなければなりませんが、こういった場合（以下参照ください）の書き方は、どちらが正しのでしょうか？



まずCSSを、

#hoge{
width:200px;
background-color:#000000;
}

と設定したと仮定します。


で、XHTMLですが・・・

-----サンプル１-----
<div id="hoge">
<p><img src="写真とか.gif" alt="" width="10" height="10" /></p>
<h1>タイトル</h1>
<p>テキストテキストテキスト・・・・・</p>
</div>

-----サンプル2-----
<div id="hoge">
<img src="写真とか.gif" alt="" width="10" height="10" />
<h1>タイトル</h1>
テキストテキスト
</div>




あと、ブロックid“hoge”内に一つだけインライン要素を配置する場合・・・

-----サンプル2-----
<div id="hoge">
<p><img src="ボタン.gif" alt="" width="10" height="10" /></p>
</div>

-----サンプル2-----
<div id="hoge">
<img src="ボタン.gif" alt="" width="10" height="10" />
</div>



要するに、CSSの設定を呼び出すために<div>で括っている場合は、それぞれのサンプル2のように既にブロックレベル要素内に収まっている」ということになるのでしょうか？
それとも、やはり、サンプル1のよう記述するのが正しいのでしょうか？

説明が分かりにくくて申し訳ございませんが、ぜひアドバイスくださいますようお願いいたします。

No.1 ベストアンサー 回答者： sanas 回答日時： 2006/06/15 12:54

W3Cが目指すのは正しいマークアップによる構造化なので、どちらもサンプル1が正しいと思います。

ここだけでなく全体の構造を考えて、同じレベルに置くべきでしょう。
参考URLの構造リストがわかりやすいので、ご参照ください。

参考URL：http://hwb.ecc.u-tokyo.ac.jp/current/4857422F575 …

No.5 回答者： noname#18096 回答日時： 2006/06/16 04:51

後者の用例ですが、

<div id="hoge">
<img src="ボタン.gif" alt="" width="10" height="10" />
</div>

が正しいと思います。
p要素は段落を示す要素ですが、img要素は文章を示す要素ではないので、p要素で括るのは誤りと考えます。
(他に文章を含んでいるのなら、p要素で括るのは有りだと思いますが)
前者の用例にも、同じ事が言えるのではないかと。

No.4 回答者： suzuko 回答日時： 2006/06/15 16:04

CSSが適応できない状況で、正しく表示されるかを基準に考えられてはいかがでしょうか？

それがアビリティを高める事のもなると思いますが。

No.3 回答者： UKY 回答日時： 2006/06/15 13:34

そもそも、先に CSS を決めてそれに合わせて HTML を書くというのが間違っています。

HTML のタグはレイアウトやデザインを指定するために書くものではありません。「CSSの設定を呼び出すために<div>で括っている」というのは、テーブルレイアウトと同じく邪道であり、HTML のメリットも CSS のメリットも両方殺すことになります。

http://oshiete1.goo.ne.jp/kotaeru.php3?q=1089695
の 4 番目と 5 番目の回答を参考にしてください。

参考URL：http://oshiete1.goo.ne.jp/kotaeru.php3?q=1089695

No.2 回答者： grizzlycat 回答日時： 2006/06/15 12:57

<div>で括った時点でサンプル1も2もW3Cに準拠した形になりますので問題はないと思います。

ただ、よりHTMLの文章構造としてより正確にブラウザや検索サイトに<img>の情報を伝えるためには<h*>や<p>で括り、サンプル1のように代替テキストを入力しておく事が良いと思います。