[17-3] セクションと見出しのルール(section, h1~h6)

この記事は HTML5.1の仕様に合わせて全面修正しました。

この記事はW3Cの HTML5「4.3.10 Headings and sections(見出しとセクション)」を参考に書いていました。
そこでは下記ようなマークアップも正しいとされていましたが...

★注意★ これ↑は HTML5.1では推奨されません

2016年11月にW3Cから勧告された「HTML5.1」では「セクションの入れ子レベルに対して、文書構造的に正しいランクの見出しを使う必要がある」と明記されています。
HTML 5.1 W3C Recommendation, 1 November 2016「4.3.10. Headings and sections」

というわけで、この記事はサンプルコードも含めて全面的に書き直しました(2017年1月記)

今回は「セクションと見出し要素のルール」について。HTML5からの新しいルールです。
見出し要素(h1〜h6)と密接な関係があります。けっこう理屈っぽいけど大事です。

使用する要素 <section> 〜 </section>
<h1> 〜 </h1>, <h2> 〜 </h2>, <h3> 〜 </h3>
<h4> 〜 </h4>, <h5> 〜 </h5>, <h6> 〜 </h6>

HTML5から「セクションを示す要素」ができました

見出し要素(h1〜 h6(ヘディング・コンテント))は、数字の早いほうから順に上位ランクになります。
書籍でイメージすると、h1は「書籍名」などの大きいランク。h2は「第1章」、h3で「第1節」といった具合で、数字が大きくなるとランクが下がっていきます。

HTML4 や XHTML1 のときは「セクションを示す要素」が無かったので、「見出し要素のランク」によって、章・節・項などのレベルやその範囲を推測するしかありませんでした。

HTML5から セクショニング・コンテント <article> <aside> <section> <nav> が加わって、セクションのレベルや範囲をよりはっきりさせる事ができるようになりました。

<section>要素は、その中に見出し要素(h1〜h6)を含むことで、その見出しランクによって、そのセクションのレベル(階層の深さ)が明示されます。

見出しのランクでセクションのレベルが決まる

<section>要素の中の最初の見出し要素(ヘディング・コンテント h1〜h6)がそのセクションの見出しになります。
(複数の見出し要素がある場合は、暗示的なセクションが作られます。その件は後述

<section>要素は入れ子にできます。入れ子にすることによってレベル(階層)が明示されますので、レベルに合わせて見出しのランクも適正なものを使う必要があります。

例を見てみましょう。

まずページ全体のタイトルをh1にして、ページの内容は<section>で分け、一部は<section>を入れ子にしています。セクションのレベルに合わせて、h1、h2、h3を使い分けていますね。
このマークアップでセクションのレベルは下記のようになります。

暗示的なセクションってのもあるけど...

h1〜h6の見出し要素のランクによって暗示的なセクションが作られるというルールもあります。
1つのセクション内に複数の見出し要素がある場合に適用されます。
そのルールとは、
●見出しのランクが前の見出しのランクと同じか上位の場合 → 前のセクションはそこで終了し、新しい暗示的セクションが開始される
●見出しのランクが前の見出しのランクより下位の場合 → そのセクションに含まれる暗示的サブセクションができる

というわけで、このような書き方もできます。<section>要素を一切使わずに見出し要素のランクで暗示的にできるセクションに頼っています。

この書き方でも、先程のセクションのレベルとまったく同じになります。
<h1>のあるセクションの中に暗示的なセクション(<h2>があるセクション)が作られ、その中にさらに<h3>があるセクションが作られます。その後の<h2>以降はランクが上がったので新たなセクションが作られますが、それは<h1>のあるセクションに含まれたもの、というわけです。

ただし、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.

まあ普通に、 <section>などの要素内に1つ見出し要素をつけて、入れ子にしたければ入れ子にし、見出し要素もレベルに合わせたものを使えということですね。

HTML5.1で「h1要素を含むセクションの入れ子」はNGに!

W3Cの「HTML5」の仕様では下記の例も使えるってことになってました。
見出し要素が全部 <h1> になってますね。
解説でも「執筆時に、たびたびセクションを前後に移動させたい場合などに便利」なんて書いてありました。

しかし HTML5.1 では、この<h1>を含むセクションの入れ子については削除されています。
CSSの設計が面倒くさくなるのと、アクセシビリティの無さ(視覚ブラウザじゃない人に、文書構造がわかりにくい)からでしょうね。

上のソースコードは、正しくはこのように書くと良いでしょう。
(<header>要素も使ってみました。これは次回やります。)

次回予告

いかがでしたか。セクションを表す新要素4つの話は今回で終わりです。

次回は、これも新要素の<header>を使ってみましょう。これはヘッダー部分を示す要素。
この新要素の登場で、誰が書いてもヘッダーだとわかるし、CSSの指定もしやすくなりました。

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

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

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

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

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、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
07 | 2017/08 | 09
- - 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.