[17-3] セクショニング要素と見出し要素のルール

最終更新日:2017年10月13日  (初回投稿日:2011年07月14日)

今回はセクショニング要素と見出し要素のルールについて。
HTML5からの新しいルールで、見出し要素(h1〜h6)と密接な関係があります。

ここで言う「セクション」は、<section>要素のことではなく 概念的なセクション。
書籍の「章・節・項」のような、レベル(階層)のある「まとまり」のことです。

本日のINDEX
  1. セクショニング・コンテントは明示的アウトラインを作る
  2. 見出し要素(h1〜 h6)は暗示的なアウトラインを作る
    1. 「明示的」なマークアップが推奨されています
    2. 見出し要素が無い場合もありえます
    3. 「暗示的」なアウトラインが便利な場合も
  3. HTML5.1で「h1要素を含むセクションの入れ子」はNGに!

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">&lt;article&gt;</a>
    <a href="#sec1-2">&lt;aside&gt;</a>
    <a href="#sec1-3">&lt;section&gt;</a>
    <a href="#sec1-4">&lt;nav&gt;</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> と同じく「セクショニング・コンテント」カテゴリーに属す要素で、「ナビゲーション」を作ります。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

No title

個人的にはh1,h2がほとんどで、h4~h6は使った事が無いです。階層が深くなるとページを変えています。Bでされてるように、同じsection内で、<h2>のあとに<h1>を持ってくる事なんてありえるんですか!?記事の内容的にも破綻しそうな気がします。

Re: No title

torikoさん
この<h2>のあとに<h1>をもってくるのとか、<h1>が同じページにたくさんあるのって、やはり「HTML5.1」で使えなくなったそうです。
この記事を書いた2011年の時点で、「HTML5」では「B」のような使い方も「暗示的セクション」を作るので「あり」だったのですが、
2016年11月に勧告された「HTML5.1」では、明示的にsection要素で囲んでやらなきゃダメだし、文書構造的に正しいレベルのヘッダーを書かなきゃならなくなったそうです。
まあヘッダーのレベルに関しては元に戻ったんですね。
私も「B」だとCSSの設計が難しくてムリ。結局、文書構造的に正しいヘッダーしか使ったことがありません。

年明け早々にこのページを書き直そうと思っています。

Re

最新動向を教えていただきありがとうございます。このサイトでたびたび本当に助かっております。
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.