【html5】sectionタグについて

Question

html5のsectionタグについてです。
sectionタグは以下のように定義されていることを確認しています。

コンテナ要素ではありませんので、レイアウト目的に使用することはできません。スタイリングに都合の良い要素が必要になった場合はdiv要素が推奨されています。
section要素は章や節といった単位で扱うので、セクション内容を表す見出し要素が必ず必要になります。

レイアウト目的というのは具体的にどのような場合を指すのでしょうか？
例えば下記のようにsection要素の中に見出し要素(hタグ)を入れて条件をみたしていれば、<section id="test">にCSSの装飾(float,margin,padding,positionなど）を施してもよいのでしょうか？

<section id="test">
 <h1>test</h1>
  <p>testtesttest</p>
</section>

初歩的な質問で申し訳ございません。
アドバイスお願いします。

Comments

[kei344]

引用部分は半角で「> 」を行頭に付けることで表現出来ます。また、引用元のURLも追記いただけるとありがたいです。

Answer 1

section要素にCSSを適用してはいけないなんて言うルールはありません。
ただしくsection要素を使用した領域を、CSSのセレクタとして利用することはなんら問題ありません。

「レイアウト目的で使ってはいけない」というのは、例えば文書の情報構造と関係ない場所を
要素の配置や装飾の目的でグルーピングしたいような時に、divの代わりのようにsection要素を使うようなことをしてはいけない、という意味です。

例えば見出しではないところを「大きな文字で強調したいから」という理由でh1要素を使ってはいけないのと理屈は同じです。そういう理由でh1要素を使うことも「レイアウト目的・装飾目的で本来の用途ではない使い方をすること」に該当します。
でもだからといってh1要素にCSSを適用してはいけないなんていうことはありませんね？
それと一緒です。

ただしくマークアップした上で、意味付けとして使用した要素に対してCSSで装飾を加え、
それでもなお枠が足りない場合にdivを足して補っていく、という考えで良いと思います。

Comments

[a.m]

分かりやすい解説ありがとうございます。
下記のW3CのHTML5仕様書を読んで疑問だったので質問しました。
https://momdo.github.io/html5/sections.html

ずっとどうなのだろうとモヤモヤしていたので、とてもスッキリしました
今後は文章の情報構造を守った上で適宜CSSで装飾を加えていきたいと思います。
ありがとうございました。

[aKusano]

一応補足しておくと、運用ルールとしてsection要素にはレイアウト用のスタイル定義を当てず、必ずdiv要素を追加してそちらに適用するということは考えられます。

たとえば当初の文書構造ではたまたまsection要素がそのままレイアウトの定義にも使える領域を示していたとしても、後日メンテナンスで構造が変わり、レイアウト用の定義を当てることが出来なくなる恐れもあります。section要素はあくまで文書構造を表す要素ですので、構造が変更になれば当然それに合わせてマークアップする領域も変更するのが当然だからです。
この時、もしclass等をつけずに純粋なsectionタグに直接スタイルがあたっていたとしたら、修正が面倒になりますよね。

従って、少なくともスタイルを当てる際にはclass等を設定してそちらに定義しておくべきですし、もっと安全を期するなら、固定のレイアウト枠などについては冗長になってもdiv要素を追加してそちら側で定義をしておいた方が運用的には安全性は高くなります。

[a.m]

具体的な補足説明ありがとうございます。
とても参考になります。

・section要素にスタイルを当てる場合はidやclassを設定しそちらに定義する。
・メンテナンスなどで構造が変わる可能性のある固定レイアウト枠についてはdiv要素を追加してそちらにスタイルを当てる

アドバイスいただいた上記の点をしっかり踏まえてコーティングしたいと思います。

Answer 2

レイアウト目的と言うのはその名の通りレイアウトに使ってはダメということです。
borderやbackground、paddingもmarginもダメです。
要するにデザインに関わる一切のCSSを使えない、と思ってください。

そういった場合はsectionの内側にdivを入れて、そのdivにCSSを付けましょう。