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のよう記述するのが正しいのでしょうか?
説明が分かりにくくて申し訳ございませんが、ぜひアドバイスくださいますようお願いいたします。
No.1ベストアンサー
- 回答日時:
W3Cが目指すのは正しいマークアップによる構造化なので、どちらもサンプル1が正しいと思います。
ここだけでなく全体の構造を考えて、同じレベルに置くべきでしょう。
参考URLの構造リストがわかりやすいので、ご参照ください。
参考URL:http://hwb.ecc.u-tokyo.ac.jp/current/4857422F575 …
No.5
- 回答日時:
後者の用例ですが、
<div id="hoge">
<img src="ボタン.gif" alt="" width="10" height="10" />
</div>
が正しいと思います。
p要素は段落を示す要素ですが、img要素は文章を示す要素ではないので、p要素で括るのは誤りと考えます。
(他に文章を含んでいるのなら、p要素で括るのは有りだと思いますが)
前者の用例にも、同じ事が言えるのではないかと。
No.3
- 回答日時:
そもそも、先に 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
- 回答日時:
<div>で括った時点でサンプル1も2もW3Cに準拠した形になりますので問題はないと思います。
ただ、よりHTMLの文章構造としてより正確にブラウザや検索サイトに<img>の情報を伝えるためには<h*>や<p>で括り、サンプル1のように代替テキストを入力しておく事が良いと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
超音波で洗脳。
-
含む含まないという概念自体の...
-
inputタグはformタグで必ず囲む...
-
質問1.
-
改行ほどは行かないけど、若干...
-
角丸画像の背景色を透明にした...
-
スタイルシートで文字色を指定...
-
smallにtext-allignが効かない
-
clear:both;を単体で指定
-
テキストボックスの中にリンク...
-
「諸要素」とはどういう意味で...
-
figcaption要素の中にul要素
-
2個のFormを横並びにしたい
-
タグは大文字と小文字どちらが...
-
CSSで改行後の行間調整
-
親要素・子要素
-
CSSファイルを使用せず、HTMLの...
-
タイトルタグの中に使わないほ...
-
cssで#main dl > ddの「>」はど...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
超音波で洗脳。
-
質問1.
-
smallにtext-allignが効かない
-
含む含まないという概念自体の...
-
NからZへの全単射を具体的に構...
-
角丸画像の背景色を透明にした...
-
タグは大文字と小文字どちらが...
-
改行ほどは行かないけど、若干...
-
2個のFormを横並びにしたい
-
「諸要素」とはどういう意味で...
-
input type="hidden"で取得した...
-
CSS:overflow要素の印刷について
-
textareaの幅を画面と合わせたい
-
親要素・子要素
-
テキストボックスの中にリンク...
-
emとstrongの反対
-
cssのdisplay:block
-
border: noneでボタンの境界線...
-
tdに対してmin-heightの定義、...
おすすめ情報