html5 の semantics すなわち、 article, section, nav, aside, header, footer, main について

Published: 2020/2/1

html5 では、ドキュメントの sectioning が行われる。
- sectioningRoot は、アウトラインを構成する。
  - body は sectioning root である。
  - 子孫に現れた sectioningRoot も内部にセクションを持ちうるが、親の sectioningRoot のアウトラインには影響を与えない。
- アウトラインは、 markdown heading のように、ネストされたセクションから構築される。
  - <h1>~<h6> タグは、 heading content という。
  - 内部の heading content によって、 sectioning root と sectioning content は、階層的なセクション分けが実行される。
- セクションは、 heading を一つ持つ。
  - heading content を持たなかった sectioning content や root は、 impled heading を持つものとして処理される。
- sectioning content は、親に当たる sectioning content/root に対する、子 section に必ずなる。
  - article, section, nav, aside タグは sectioning content である。
- heading content がないまま sectioning content が現れた場合、暗黙の impled heading を持っていたセクションが存在したものとして処理される。
  - 結果、例えば body の直下に最初 nav があり、その後に h1 が現れたとき、それは以下のようなドキュメントを構成する。
    1. untitled body section (impled heading)
      1. nav
    2. h1 content
sectioning content のタグの中でどれを用いるかは、そのセクションの意味から考えて決定する。
- article は、組織による管理単位をなすのならばそれを用いる。
  - author がいて、 published が定義できる、完全な情報は article たりうる。
    - コメントは article たりうる。
- section は、たとえば章とかに対応する。
  - ふわっとしている。
  - むしろ、ただの汎用セクショニングタグとして使われる想定なのではないか、と考えることもできる。
    - heading content は dom tree 的なセクション分けにはあまり強くないので、それをタグで強制実行できる仕組みが section タグで、 article でも aside でも nav でもないもの、という立て付けがあり得そう。
- nav は navigation っぽいセクション。
  - TOC とか。
- aside は、周辺的な記述が行われるセクション
sectioningRoot, sectioning content, heading 以外は sectioning に寄与しない。
- 孫以降にある sectioning 関係のタグは、セクショニングの処理においては、親がセクション関係のタグになるまで、 raise-sexp 的な処理が行われる。
- main, header, footer もセクション構成に影響を与えることはない。
  - header, footer は、セクションの内部におけるその subtree の役割を表すタグである。
    - header は、「ヘッダっぽい塊」を表すためのタグである。
    - footer は、親 sectioning content / root のフッターを表す。
  - main は、ページのメインのコンテンツを表す。
    - main タグはそのページ(document)にただ一つだけ存在する。
    - main タグの先祖に、 html, body, div, form 以外が現れてはならない。
      - 帰結として、 main 直下の heading たちは、一つ残らず、 body outline 自体の section を構築する。