今だけ人気マンガ100円レンタル特集♪

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

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



まずCSSを、

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

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


で、XHTMLですが・・・

-----サンプル1-----
<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のよう記述するのが正しいのでしょうか?

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

このQ&Aに関連する最新のQ&A

A 回答 (5件)

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


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

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

後者の用例ですが、



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

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

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



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

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

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



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

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング