メインコンテンツへスキップ

HTMLの区分化

1.区分化関連の要素

HTML文書の
区分化に関わる要素を
まとめました。

HTMLには、ヘッダーとフッターの範囲, 区分を表す要素があります。それらをセクショニングコンテンツと言います。見出しを表す要素があります。それらをヘディングコンテンツと言います。セクショニングコンテンツ(Sectioning content.) や ヘディングコンテンツ(Heading content.)は、類似した特性を持つ要素をグループ化したカテゴリ(Category)の１つです。

区分化に関わる要素は、以下の各要素です。

  • セクショニングコンテンツ
  • ヘディングコンテンツ
  • その他
    • header要素 : その区分の導入的なコンテンツのグループ
    • footer要素 : その区分の著作者に関する情報, 関連文書へのリンク, 著作権情報等
    • main要素 : ドキュメントの主要なコンテンツ
    • address要素 : ドキュメント, 記事の連絡先情報

2.HTML文書の区分け

セクションを訳すと、
章, 節 とか
区分, 区画 となります。

区分とは、区別して分けること。また、それぞれに分けた、その仕切り。区わけ。

header要素, footer要素の 範囲 ( scope ) を定義する コンテンツ ( content ) の 分類 ( カテゴリ ) を、 セクショニングコンテンツ ( Sectioning content ) といいます。無理して日本語で造語すると、 区分化 ( セクショニング ) 内容 ( コンテンツ ) となるかと思います。

区分, 括りは、部, 編:Part, 章:Chapter, 節:Section, 款:Subsection, 目:Division, 条:Article(Art.), 項:Paragraph(para.), 号:item となるようです。 まぁWebページでどの様に区分を使うかは、考え方次第かと思いますが。

セクショニングコンテンツに分類される要素は、以下の各要素です。

セクショニングコンテンツとは分類されていませんが、全体の区分けの起源として body要素が、各セクションの情報として header要素, footer要素が, 文書全体の主要なコンテンツとして main要素が、各セクションの連絡先情報として address要素が、あります。
(※ body要素のセクショニング・ルートは廃止されました。)

ヘディングコンテンツは、セクションの見出しを定義します。セクショニングコンテンツにより明示的にマークアップされていない場合には、このヘディングコンテンツにより暗示的に区分化(セクション化)します。

要素
メタ
フロー
フレー
埋込
区分化
見出し
起源
対話型
メタ
メタデータコンテンツ
スク
スクリプトをサポートする要素
フロー
フローコンテンツ
区分化
セクショニングコンテンツ
起源
セクショニングルート(廃止)
見出し
ヘディングコンテンツ
フレー
フレージングコンテンツ
埋込
エンベデッドコンテンツ
対話型
インタラクティブコンテンツ
要素 種類 メ
タ 		流
れ 		文
節 		埋
込 		対
話 		知
覚 		区
分 		見
出 		ス
ク
section 通常要素 － 〇 － － － 〇 〇 － －
nav 通常要素 － 〇 － － － 〇 〇 － －
aside 通常要素 － 〇 － － － 〇 〇 － －
article 通常要素 － 〇 － － － 〇 〇 － －
  1. <section>
  2. <h3>見出しａ</h3>
  3. <p>見出しの示す範囲を表す</p>
  4. <address>address</address>
  5. </section>
  6. <section>
  7. <h3>見出しｂ</h3>
  8. <p>addressの示す範囲を表す</p>
  9. <address>address</address>
  10. </section>

セクショニングコンテンツの１つである section要素を用いた例です。この例では、境界線(ボーダー)を用いて範囲を表示しています。この範囲が見出しが示す範囲で、フッターが示す範囲です。

見出しａ

見出しの示す範囲を表す

address

見出しｂ

addressの示す範囲を表す

address

上記の 4 つの要素は、いずれも でもあります。
セクショニングコンテンツはコンテンツの一部としては配置できないけれども、他のフローコンテンツはコンテンツの一部として配置できる要素は、以下の各要素です。

セクショニングコンテンツをコンテンツの一部として配置できる要素は、以下の各要素です。

3.HTML文書の暗示的な区分け

ヘディングコンテンツは、
区分のヘッダーを表します。

は、区分のヘッダーを表します。セクショニングコンテンツによってその示す範囲を明示的に表しますが、ヘディングコンテンツ自身によっても暗示的に示す範囲を表します。

(Heading content.)とは、区分(セクション・Section)のヘッダーを定義するコンテンツ(Content) の分類(カテゴリ・Category)です。(セクショニングコンテンツの要素を使用して明示的にマークアップされているか、ヘディングコンテンツ自体によって暗示されているか)
日本語で表すと、 見出し ( ヘディング ) 内容 ( コンテンツ ) となるかと思います。

ヘディングコンテンツに分類される要素は、以下の各要素です。

要素
メタ
フロー
フレー
埋込
区分化
見出し
起源
対話型
メタ
メタデータコンテンツ
スク
スクリプトをサポートする要素
フロー
フローコンテンツ
区分化
セクショニングコンテンツ
起源
セクショニングルート(廃止)
見出し
ヘディングコンテンツ
フレー
フレージングコンテンツ
埋込
エンベデッドコンテンツ
対話型
インタラクティブコンテンツ
要素 種類 メ
タ 		流
れ 		文
節 		埋
込 		対
話 		知
覚 		区
分 		見
出 		ス
ク
h1 通常要素 － 〇 － － － 〇 － 〇 －
h2 通常要素 － 〇 － － － 〇 － 〇 －
h3 通常要素 － 〇 － － － 〇 － 〇 －
h4 通常要素 － 〇 － － － 〇 － 〇 －
h5 通常要素 － 〇 － － － 〇 － 〇 －
h6 通常要素 － 〇 － － － 〇 － 〇 －
hgroup 通常要素 － 〇 － － － 〇 － 〇 －
  1. <body>
  2. <h1>見出しの例</h1>
  3. <p>段落１</p>
  4. <h2>見出し２</h2>
  5. <p>段落２</p>
  6. <h2>見出し２</h2>
  7. <p>段落２</p>
  8. <h3>見出し３</h3>
  9. <p>段落３</p>
  10. <h2>見出し２</h2>
  11. <p>段落２</p>
  12. </body>

見出し要素 (h1 - h6) は、セクションを暗示します。

この例はヘディングコンテンツ自体によって、暗示されている例です。
２行目の h1要素は、直近の祖先要素, セクションを探すと１行目の body要素が区分化起源ですのでそこの見出しとして表れます。
４行目の h2要素は、直近の祖先要素, セクションを探すと２行目の h1要素が上位ランクの見出しですのでそこにコンテンツ内にあるコンテンツを暗示的に表します。
６行目の h2要素は、直近の祖先要素, セクションを探すと４行目の h2要素が同位ランクの見出しですのでそこにコンテンツに後続するコンテンツを暗示的に表します。
８行目の h3要素は、直近の祖先要素, セクションを探すと６行目の h2要素が上位ランクの見出しですのでそこにコンテンツ内にあるコンテンツを暗示的に表します。
10行目の h2要素は、直近の祖先要素, セクションを探すと６行目の h2要素が同位ランクの見出しですのでそこにコンテンツに後続するコンテンツを暗示的に表します。

見出しの例

段落１

見出し２

段落２

見出し２

段落２

見出し３

段落３

見出し２

段落２

セクションの暗示をイメージする為に、別の要素を用いて表現しています。

上記の 7 つの要素は、いずれもフローコンテンツ でもあります。
ヘディングコンテンツはコンテンツの一部としては配置できないけれども、他のフローコンテンツはコンテンツの一部として配置できる要素は、以下の各要素です。

ヘディングコンテンツをコンテンツの一部として配置できる要素は、以下の各要素です。

4.区分化の意味的な要素

セクショニングコンテンツに
関連するコンテンツを
グループ化する要素があります。

セクショニングコンテンツ以外にも、ヘッダーとフッターの範囲, 区分は表さないが関連するコンテンツをグループ化する要素があります。

それぞれのグループの意味を表す為に、以下の要素があります。

  • header要素 : その区分の導入的なコンテンツのグループを表す要素
  • footer要素 : その区分の著作者に関する情報, 関連文書へのリンク, 著作権情報等を表す要素
  • main要素 : ドキュメントの主要なコンテンツを表す要素
  • address要素 : ドキュメント, 記事の連絡先情報を表す要素
要素 種類 メ
タ 		流
れ 		文
節 		埋
込 		対
話 		知
覚 		区
分 		見
出 		ス
ク
header 通常要素 － 〇 － － － 〇 － － －
footer 通常要素 － 〇 － － － 〇 － － －
main 通常要素 － 〇 － － － 〇 － － －
address 通常要素 － 〇 － － － 〇 － － －
  1. <body>
  2. <header>
  3. <h1>区分化コンテンツ以外</h1>
  4. </header>
  5. <main>
  6. <p>区分化コンテンツ以外の例です。</p>
  7. </main>
  8. <footer>
  9. <address>address</address>
  10. </footer>
  11. </body>

HTML文書のコンテンツに対するグループ等の意味を、各要素は表しています。セクショニングコンテンツではないので、ヘッダーとフッターの範囲は表しません。header要素は、導入的なコンテンツのグループを表して見出しも含み、footer要素は、著作者に関する情報, 関連文書へのリンク, 著作権情報等を表して連絡情報を含んでいますが、それぞれの示す範囲は表しません。

  1. <article>
  2. <header>
  3. <h3>見出し</h3>
  4. <p>10月11日更新</p>
  5. </header>
  6. <p>header要素は、見出しなど導入的なコンテンツのグループを表します。</p>
  7. <p>footer要素は、連絡先情報など著作者に関する情報等のグループを表します。</p>
  8. <footer>
  9. <address>address</address>
  10. <p>Copyright(C) 2020 KOUTAN</p>
  11. </footer>
  12. </article>

セクショニングコンテンツの１つである article要素を用いた例です。この例では、境界線(ボーダー)を用いて header要素, footer要素の範囲を表示しています。

header要素は、article要素が表す区分の導入的なコンテンツのグループを表しています。footer要素は、article要素が表す区分の著作者に関する情報, 関連文書へのリンク, 著作権情報等のグループを表しています。

見出し

10月11日更新

header要素は、見出しなど導入的なコンテンツのグループを表します。

footer要素は、連絡先情報など著作者に関する情報等のグループを表します。

address

Copyright(C) 2020 KOUTAN

5.セクショニング・ルート

セクショニング・ルート
と言う区分(カテゴリ)が
ありました。

廃止された区分(カテゴリ)ですが、 (区分化起源・sectioning roots)と呼ばれる要素がありました。
無理して日本語で造語すると、 区分化 ( セクショニング ) 起源 ( ルート ) となるかと思います。
これらの要素は独自のアウトラインを持つことができますが、これらの要素内のセクションと見出しは、祖先のアウトラインには影響しません。

セクショニング・ルート であった要素は、以下の各要素です。

  • body要素 : HTML文書のコンテンツ（内容）を表す要素
  • td要素 : テーブル内のデータセルを表す要素
  • fieldset要素 : オプションでキャプションを使用してグループ化されたフォームコントロール（または他のコンテンツ）のセットを表す要素
  • details要素 : ユーザーが追加情報またはコントロールを取得できる開示ウィジェットを表す要素
  • blockquote要素 : 別のソースから引用されたセクションを表す要素
  • dialog要素 : ダイアログボックス、インスペクタ、ウィンドウなど、ユーザーがタスクを実行するために対話するアプリケーションの一部を表す要素
  • figure要素 : フローコンテンツを表し、オプションでキャプションが付いており、完全な文のように自己完結型であり、通常、ドキュメントのメインフローから単一のユニットとして参照される要素