HTMLクイックリファレンスの<section>ページを読んでいて、ポイント１の「レイアウト目的のコンテナ要素として用いるなら、<section>ではなく、<div>を使用してください。」がどうしてもすっと理解できないんですが、ここでいうレイアウトって何を指してるんですかね……。
もうひと噛みぐらいしたら噛み砕けると思うんですが……見出しが無いのに区切ることをレイアウト目的って言ってるんですかね……。
http://www.htmq.com/html5/section.shtml
一緒に読まれている質問
13 件の回答
sectionは意味的なまとまりだから、その下につく見出しとかも同じ意味的なまとまりの仲間とみなされる。
divは単なるグルーピング。
だからレイアウトする時にはdivで大枠を作って幅を設定したりする。
アウトラインに関与するsectionに限定するから複雑な問題に感じるのではなかろうか。
全部pタグと、全部divタグの差が分かるなら、君の謎はもう解けてる。
単に <div> 代わりには使うなよという風に捉えればいいだろう。意味的に破綻がなければ別に使っても構わない。
CSSを効かせたいブロックならDIVにしろってことだと認識してた。sectionにはCSSをかけたらダメ！っていうくらいの。効くけどさ。
divとsectionで迷ったことはないけど、HTML5が出始めた頃はsectionとarticleの使い所で迷ってたな。
Re:5
私も一時期同じ様に思ってたんですが、ふと「じゃあh1 class="hoge"はどうなるの…？」と考えてしまって。
<header>
<div class="header">
hogehoge
</div>
</header>
CSSかけないならこうなる感じですか？？
皆さん回答ありがとうございます。
「全部pタグと、全部divタグの差〜」がなんとなくしっくり来るような……。
改めて考えてみると結構感覚で使い分けてるところもあるので、もう少し人に「こう！」って説明できるようになりたいなぁと思ってます。
Re:8
タグでマークアップするということは、各要素を「(論理的な)役割ごとに区切る」ということです。しかし、しばしば「装飾以外に目的のない要素」が発生します。つまりそれは「論理的な役割を持たない要素」のことです。そのような要素に対して、論理的な意味を持つタグを指定するべきではないでしょう。ということです。
Re:8
> 「レイアウト目的のコンテナ要素として用いるなら、<section>ではなく、<div>を使用してください。」
> ここでいうレイアウトって何を指してる
したがって、「レイアウト目的のコンテナ要素」を「(装飾以外の)役割を持たないコンテナ要素」と読み替えればよいかと。
結局文書の構造なのだから、小説か何かを構造化するイメージでいつもマークアップする。
ここで言ってるレイアウト目的のsectionはNGとは、
〈section〉
見出し
文章一節あります
ほげほげ
〈/section〉
〈section〉
〈!--文章の後にスペースを設けたい--〉
〈/section〉
の後者のsectionはNGってことじゃないの？
前者のsectionに余白やら背景やらのcssをつけることは問題ない認識
Re:5
いろいろ違うと思うよ。
> CSSを効かせたいブロックならDIV
html5において、html要素にブロックやインラインという概念はないよ。
単に、divにおけるdisplayの初期値がblockというだけの話。
> sectionにはCSSをかけたらダメ
初学者の覚え方としては分からないでもない発想だけど、だいぶ違う。
htmlは論理構造を指定するもので、CSSはプレゼンテーション(見た目)を指定するもの。
htmlでは、正しい論理構造を作ることだけを考える。
cssでは、正しいプレゼンテーションになることだけを考える。
このふたつが両立できれば、何をやってもいいんだよ。
問題になるのは、CSSの都合で、論理構造には加えることのできないhtmlタグが発生してしまうこと。なるべくCSS(スタイリング)の都合をHTMLに持ち込まないことが重要だね。制作上のプライオリティとしてはHTML > CSSだと思うよ。
単純に、sectionには必ずh1〜などの見出しが入る、もし入らないのであればそこはsectionではなくdivにすべき、ということです。