HTML構造のルールについて質問させてください。
初歩的な質問かと思いますが、同じ階層の要素は何らかのタグで囲わなくてはいけませんか？
具体的には、下記Aは正しくなく、Bのようにしなければならないのでしょうか？
A.-----------------------<div>アイウエオ<div>カキクケコ</div></div>
B.-----------------------<div><p>アイウエオ</p><div>カキクケコ</div></div>
文法上はどちらでもよい。しかし、Bのほうが行儀がいい。理由は、HTML4.01時代はbody直下にテキストがあるのはだめだったのの名残。つまり、HTML4.01では<body>これはだめ<div>これはいい</div></body>だった。
リンク先で確認してみれば？
文法の次に気になるのは、Aだと、cssやjavascriptで色々するとき面倒だから、俺だったらpかspanの中に入れてしまうだろうと思った。今時cssなしのウェブページはかんがえられないし、Javasriptでdom操作は普通なので、良く纏められた書き方は必須
もしかしたら俺の知らない理由でAの書き方をする人が居るのかもしれない
>同じ階層の要素は何らかのタグで囲わなくてはいけませんか？別にそういうルールはない。それにA、Bともに文法違反ではない。.ただし、それと本来のタグの正しい使い方をしているかは別。例えばpタグは段落を表すものだから、<p>アイウエオ</p>を段落と見なしているなら、同階層のテキストが並んだ<div>カキクケコ</div>もpタグじゃないと辻褄が合わないよね。divタグは文章構造上の意味を持たないタグで、pタグ等の意味を持ったタグに該当しないときに初めて使うタグだからね。言わば適切なタグがないときに使う手段。
これに一票
少なくとも例に出したdivに関しては意味を持たない要素だから、あってもなくなくても何も意味は変わらない。極端な話、divを100回ネストしても変わらない。<div> <div> あ <div> い <div> う <div> え <div> お </div> </div> </div> </div> </div></div>
セクショニングに関係ないならどっちでもいいんじゃね。
みんなの回答 5 件
文法上はどちらでもよい。
しかし、Bのほうが行儀がいい。
理由は、HTML4.01時代はbody直下にテキストがあるのはだめだったのの名残。つまり、HTML4.01では
<body>
これはだめ
<div>これはいい</div>
</body>
だった。
リンク先で確認してみれば？
文法の次に気になるのは、Aだと、cssやjavascriptで色々するとき
面倒だから、俺だったらpかspanの中に入れてしまうだろうと
思った。今時cssなしのウェブページはかんがえられないし、
Javasriptでdom操作は普通なので、良く纏められた書き方は必須
もしかしたら俺の知らない理由でAの書き方をする人が居るのかもしれない
The W3C Markup Validation Service
https://validator.w3.org/#validate_by_input>同じ階層の要素は何らかのタグで囲わなくてはいけませんか？
別にそういうルールはない。
それにA、Bともに文法違反ではない。
.
ただし、それと本来のタグの正しい使い方をしているかは別。
例えばpタグは段落を表すものだから、
<p>アイウエオ</p>を段落と見なしているなら、同階層のテキストが並んだ<div>カキクケコ</div>もpタグじゃないと辻褄が合わないよね。
divタグは文章構造上の意味を持たないタグで、pタグ等の意味を持ったタグに該当しないときに初めて使うタグだからね。
言わば適切なタグがないときに使う手段。
少なくとも例に出したdivに関しては意味を持たない要素だから、あってもなくなくても何も意味は変わらない。極端な話、divを100回ネストしても変わらない。
<div>
<div>
あ
<div>
い
<div>
う
<div>
え
<div>
お
</div>
</div>
</div>
</div>
</div>
</div>
<div>あいうえお</div>
セクショニングに関係ないならどっちでもいいんじゃね。
関連するトピックス