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 · ベストアンサー

W3Cが目指すのは正しいマークアップによる構造化なので、どちらもサンプル1が正しいと思います。
ここだけでなく全体の構造を考えて、同じレベルに置くべきでしょう。
参考URLの構造リストがわかりやすいので、ご参照ください。

参考URL：

http://hwb.ecc.u-tokyo.ac.jp/current/4857422F575757A4C8BEF0CAF3C8AFBFAE2F48544D4CCAB8BDF1A4CEBDF1A4ADCAFD2F48544D4CCAB8B

回答No.5

noname#18096

後者の用例ですが、

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

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

回答No.4

suzuko

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

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

回答No.3

UKY

そもそも、先に 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

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

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