[17-3] セクショニング要素と見出し要素のルール
最終更新日：2017年11月01日 （初回投稿日：2011年07月14日）
今回はセクショニング要素と見出し要素のルールについて。
HTML5からの新しいルールで、見出し要素（h1〜h6）と密接な関係があります。
ここで言う「セクション」は、<section>要素のことではなく 概念的なセクション。
書籍の「章・節・項」のような、レベル（階層）のある「まとまり」のことです。
●
2017年10月：アウトラインという考え方を追加しました。
HTML 5.1 - Headings and sections を参考に、若干の追加修正をしています。
●
2017年1月：この記事は全面修正しました。
初回投稿時は、W3Cの HTML5「4.3.10 Headings and sections」を参考にし、そこでは下記ようなマークアップも正しいとされていましたが...（★注意★下図のコードは推奨されません）
2016年11月にW3Cから勧告された「HTML5.1」では「セクションの入れ子レベルに対して、文書構造的に正しいランクの見出しを使う必要がある」と明記されています。
そのため、サンプルコードも含めて全面的に書き直しました。
セクショニング・コンテントは明示的アウトラインを作る
「セクショニング・コンテント」に属する要素（<article> <aside> <section> <nav>）は「アウトライン」を持ちます。
アウトラインとは、概要・あらすじって意味ではなく「外郭」みたいなかんじ。ひとまとまりの関連性のコンテナ的なものになるという意味です。
「セクショニング・コンテント」に属する要素は、その中の最初の 見出し要素（h1〜h6）の「ランク」によって、そのアウトラインの「レベル（階層の深さ）」が明示されます。
見出し要素（h1〜 h6）は、数字の早いほうから順に上位ランクになります。
書籍で例えると、h1は「書籍名」などの最上位ランク。
h2は「第1章」、h3で「第1節」といった具合で、だんだんランクが下がっていきます。
例を見てみましょう。
h1 は最上位ランクなので、サイトのタイトルに使います。
その後はセクションのレベルに合わせて、h2、h3... を使い分けていきます。
上図のマークアップで、セクションのレベルは下記のようになります。
見出し要素（h1〜 h6）は暗示的なアウトラインを作る
「セクショニング・コンテント」の中の最初の見出し要素（h1〜h6）の「ランク」によって、アウトラインのレベルが明示されるんでしたね。
2晩目以降の見出し要素のランクによって、そのアウトライン内に 暗示的なアウトラインが作られます。（セクション内に複数の見出し要素があればの話）
●前の見出しのランクと同じ または 上位の場合
→ 前のセクションはそこで終了。新しい暗示的セクションが「開始」される。
●前の見出しのランクより下位 の場合
→ 前のセクションに含まれる暗示的な「サブセクション」ができる
例を見てみましょう。
見出し要素だけでマークアップして、セクショニングの要素は使っていません。
この書き方でも、先程の構造とまったく同じになります。
<h1>のあるセクションの中に、暗示的なサブセクション（<h2>のセクション）が作られ、さらにその中に<h3>があるセクションが作られます。
その後の<h2>を書いたので、前のセクションが終了し、新たな、同じレベルのセクションが作られます。
「明示的」なマークアップが推奨されています
W3Cの HTML5.1 仕様書では、
「暗示的なセクションに頼らずに、セクショニング・コンテントの要素（<article> <aside> <nav> <section>）で明示的に囲むように」と推奨しています。
Authors are also encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content.
見出し要素が無い場合もありえます
「明示的」なセクションを作ることが推奨されていますが、もちろん 見出し要素が無い場合もありえます。
下記のソースは、見出し要素を一つも使っていません。
<body>
<nav>
<p><a href="/">Home</a></p>
</nav>
<p>Hello world.</p>
<aside>
<p>My cat is cute.</p>
</aside>
</body>
でも、3つのセクションがあります。
1つ目は、<body>要素で作られるドキュメント全体。
その中に、2つのサブセクション（ <nav> と <aside> ）があります。
セクショニング・コンテントに属する要素には、必ず見出しが必要ってわけではなく、見出し要素が無くても階層がわかる場合は、そのままでOKってことです。
「暗示的」なアウトラインが便利な場合も
見出し要素（h1〜h6）で作られる「暗示的」なアウトライン が便利な場合もあります。
一般的なサイトで、最初に「サイト名」、次に「ページのタイトル」としたい場合、わざわざ明示的なアウトラインを作らなくても、見出し要素だけで充分な場合があります。
このサンプルの場合です。（クリックで別ウィンドウでサンプルが開きます）
サンプルのソースを見てください。
3行目の <h1>要素が <body>要素の 最初の見出し要素。
18行目の <h2>要素が <body>要素の 2番目の見出し要素です。
<body>
<header>
<h1><a href="#">Site Title</a></h1> <!--bodyの最初の見出し要素-->
<nav>
<h2>グローバルナビゲーション</h2> <!--navの見出し要素。nav内で完結-->
<ul>
<li><a href="#">CONCEPT</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">HISTORY</a></li>
<li><a href="#">ABOUT US</a></li>
</ul>
</nav>
</header>
<main>
<div id="eyeCatcher">
<h2>Sectioning Content Elements</h2> <!--bodyの2番目の見出し要素-->
<p>
<a href="#sec1-1"><article></a>
<a href="#sec1-2"><aside></a>
<a href="#sec1-3"><section></a>
<a href="#sec1-4"><nav></a>
</p>
</div><!--END #eyeCatcher-->
<div id="container"> <!--フロートで並べるための親要素です-->
<article>
...略...
</article>
<aside>
...略...
</aside>
</div><!--END #container-->
</main>
<footer>
Copyright © .... <address>...</address>
</footer>
</body>
最初の見出し（h1）の親は <header>ですが、これは「セクショニング・コンテント」ではないので、アウトラインは無し。
ですのでこの <h1> の親は <body>になり、最上位ランク = サイト名になります。
次に出て来る見出し <h2>（5行目）は、<nav>要素の中にあります。<nav>は「セクショニング・コンテント」ですので、この <h2> は <nav>の終了でおしまい。
その次に出て来る見出し <h2>Sectioning Content Elements</h2>（18行目）のすぐ上の親は <div>、その上の祖父は <main> で、両方とも「セクショニング・コンテント」ではありません。
その上の親（曽祖父）は <body> なので、この <body> の2番目の見出しとなり、ここから暗示的なアウトラインを作ります。
このアウトラインは、それ以降 <body>を親とする見出し要素がないので、最後までイキです。<footer>要素まで含みます。
というわけで、この <h2>は このページのタイトルになります。
このサンプルの構造は、このようになります。
HTML5.1で「h1要素を含むセクションの入れ子」はNG！
W3Cの「HTML5」の仕様では下記の例も使えるってことになってました。
見出し要素が全部 <h1> になってます。
「たびたびセクションを前後に移動させたい場合に便利」なんて解説されてましたw
しかし HTML5.1 で、この<h1>を含むセクションの入れ子についての記述は削除されています。
最上位ランクの <h1> がたくさん使えるのは、SEO的には有利になる気がするけど、文書構造がわかりにくくて、やはり変です。
アクセシビリティ的にもダメだし。（視覚ブラウザじゃない人に文書構造がわかりにくい）
上のソースコードを正しく書くとこうなります。
次回予告
次回は、HTML5 からの新要素 <nav> について詳しく見てみましょう。
<nav> は、前回紹介した <article>、<aside>、<section> と同じく「セクショニング・コンテント」カテゴリーに属す要素で、「ナビゲーション」を作ります。
- 関連記事
-
- [18-4] 円形（放射）グラデーションを作ろう (radial-gradient)
- [18-3] テキストにシャドウをつけよう（text-shadow）
- [18-2] 要素にシャドウをつけよう（box-shadow）
- [18-1] 要素を角丸にしよう（border-radius）
- [17-6] メインコンテンツを表す main要素
- [17-5] ヘッダーの header、フッターの footer、連絡先の address要素
- [17-4] ナビゲーションのセクションを表す nav要素
- [17-3] セクショニング要素と見出し要素のルール
- [17-2] セクショニングの article要素、aside要素、section要素
- [17-1] HTML5 の新要素でページ全体を組もう
- （ちょっとメモ）テーブルをレスポンシブ対応させるCSS
- [16-7] テーブルセルで使う scope属性と headers属性について
- [16-6] table縦列グループ化（ colgroup, col ）
- [16-5] table横列グループ化（thead, tbody, tfoot）
- [16-4] tableのセルの枠線を非表示にしよう（empty-cellsプロパティ）
やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します！ (笑)
初心者にも使いやすい（と思う）レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバー
や ロリポップ！
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバ
や、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク
コメントの投稿
No title
Re: No title
この<h2>のあとに<h1>をもってくるのとか、<h1>が同じページにたくさんあるのって、やはり「HTML5.1」で使えなくなったそうです。
この記事を書いた2011年の時点で、「HTML5」では「B」のような使い方も「暗示的セクション」を作るので「あり」だったのですが、
2016年11月に勧告された「HTML5.1」では、明示的にsection要素で囲んでやらなきゃダメだし、文書構造的に正しいレベルのヘッダーを書かなきゃならなくなったそうです。
まあヘッダーのレベルに関しては元に戻ったんですね。
私も「B」だとCSSの設計が難しくてムリ。結局、文書構造的に正しいヘッダーしか使ったことがありません。
年明け早々にこのページを書き直そうと思っています。
