HTML5 で新たに導入された section 要素、みなさんは適切に使いこなせているでしょうか。いまでは、section 要素は当たり前のように使われ、さまざまなネット記事に section 要素の説明を見つけることができますので、誤解はかなり減ったのではないでしょうか。今回は、改めて section 要素について見つめなおしてみようと思います。
section 要素とは
section 要素とは何かと聞かれれば、誰もが「一般的なセクション」と答えるでしょう。ではセクションとは何かと聞かれたらどのように答えますか？恐らく章や節に相当し、見出しが付けるのにふさわしいコンテンツ、と答えるでしょう。
では「一般的な」とはどういう意味でしょう？ここが非常にあいまいですね。しかし実は非常に簡単で、この文脈での意味は、article 要素、nav 要素、aside 要素のいずれにも該当しない、という意味です。
HTML 仕様の規定するセクションを表す要素は section 要素、article 要素、nav 要素、aside 要素の 4 つだけです。article 要素、nav 要素、aside 要素は、それぞれセクションであることに加え、個別に特別なセマンティクス（意味や用途）を持っています。つまり、それらは使いどころが限定されます。
一方で、section 要素は、article 要素、nav 要素、aside 要素に当てはまらないセクションすべてが対象になります。そういう意味で「一般的な」セクションと規定されています。
ナウい div 要素と勘違いされる
HTML5 が話題になり始めたころ、このセクションという概念があまり理解されず、section 要素はナウい div 要素、div 要素を使うより section 要素を使う方がクールだ、みたいな感覚で section 要素を乱用する人が海外に数多くいたようです。そのため、当時は section 要素を正しく使おう、といった内容の記事を数多く見かけた記憶があります。
さすがに現在ではそのような section 要素の乱用は聞かれませんが、もし HTML 初心者の方で section 要素が良くわからないという人は気を付けるようにしましょう。
ページ全体もセクションじゃない？
セクションの意味が分かると、このような疑問が出てきませんか？
「ページ全体もセクションじゃないの？見出し（タイトル）もあるわけだし。」
当然の疑問ですよね。そして結論を言うと、ページ全体もセクションです。であれば、こんなマークアップをしないといけないんじゃないの？と考えてしまいます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
<section>
<h1>ページタイトル</h1>
<p>本文…</p>
</section>
</body>
</html>
しかし、これは間違いです。このような冗長なマークアップをしなくても済むよう、HTML 仕様はちゃんと考えられています。
セクショニングルート
HTML 仕様ではセクショニングルートと呼ばれる要素を規定しています。セクショニングルートとされている要素は以下の 7 つです。
- blockquote
- body
- details
- dialog
- fieldset
- figure
- td
この中に body 要素が含まれていますね。セクショニングルートとは、セクションの親分みたいなもので、名前の通り、セクションを構成する根っこ、ということになります。なので、body 要素自体がセクションとしての意味合いをすでに持ち合わせているということです。
セクショニングルートはもう少し奥が深いので、それについては、新たに別の記事で紹介する予定です。
見出しは絶対に必要？
section 要素に限らず、セクションを表す要素には絶対に見出しが必要なのか？と疑問に思うことがあるでしょう。HTML 仕様の規定上、セクションに見出しは必須ではありません。見出しがなくても HTML 文法エラーというわけではありません。
ただ、筆者が思うに、それはレアケースではないでしょうか。そもそもセクションとは見出しを付けるにふさわしいコンテンツのことなのですから、見出しを掲載しないシーンは、そんなに多くないはずです。
もし見出しを付けたくない、と思うコンテンツがあったとしたら、それは本当に section 要素がふさわしいのかを再考したほうが良いかもしれません。場合によっては div 要素の方がふさわしいのかもしれません。前述の通り、section 要素はナウい div 要素ではありませんので、無理に section 要素を使わないほうが無難です。
見出しはすべて h1 要素でも良い？
HTML5 黎明期より HTML5 仕様策定をウオッチしていた方ならご存知の方が多いと思いますが、WHATWG の HTML5 仕様（現 HTML 仕様）では、section 要素などのセクションを表す要素で構造化されていれば、すべての見出しを h1 要素でマークアップしても良い、とされていました。
これはどういう意味かというと、次のサンプルを見ると分かりやすいでしょう。
<article>
<h1>記事のタイトル</h1>
<section>
<h1>1.見出し</h1>
<section>
<h1>1.1.見出し</h1>
<section>
<h1>1.1.1.見出し</h1>
</section>
</section>
</section>
<section>
<h1>2.見出し</h1>
</section>
</article>
このようにすべてのセクションが適切にセクションを表す要素（ここでは article 要素と section 要素）でマークアップされていれば、見出しレベルはその階層位置で必然的に分かります。ゆえに、すべてを h1 要素でマークアップしても問題ないというロジックです。
その後、W3C が HTML5 仕様策定に関わるようになってから話がこじれました。W3C 側の HTML5 仕様では、h1 要素だけで OK という規定が排除されました。日本のウェブ業界では W3C のほうに信頼度や権威が高かったせいか、W3C の HTML5 仕様に従う傾向が高かったのではないでしょうか。
しかし、W3C は HTML5 仕様の策定から手を引き、現在は最新の HTML の仕様と言えば、WHATWG HTML 仕様のことを指します。そして WHATWG HTML 仕様では、いまなお、section 要素などのセクションを表す要素で構造化されていれば、すべての見出しを h1 要素でマークアップしても良い、とされています。WHATWG HTML 仕様には、マークアップのサンプルがいくつか掲載されていますが、 見出しレベルに関わらずすべて h1 要素でマークアップしているサンプルが散見されます。
そういう意味で、すべて h1 要素でマークアップしても良いのか、と問われれば、仕様上は問題なく、HTML 文法エラーでもない、ということになります。ただし、筆者が思うに、はやり見出しレベルに応じた見出し要素を使うべきと思っています。つまり、適切に h1 ～ h6 要素を使い分けるべきと思います。
なぜなら、検索エンジンなどのロボット、スクリーンリーダーなどの支援ツール、そのほかコンテンツ構造を把握するソフトウェアすべてが、セクションを表す要素を考慮しているとは思えないからです。10 年後なら良いのかもしれませんが、少なくとも今は section 要素を使っていたとしても、見出しレベルに合わせた見出し要素を使っておいた方が得なのではないでしょうか。
まとめ
section 要素を最新の仕様から改めて解説しなおしてみましたが、腑に落ちましたでしょうか。section 要素をナウい div 要素と勘違いすることなく、適切な場所に使ってもらえることを願っております。
また、セクションを表す要素でちゃんと文書が構造化されていれば、すべての見出しを h1 要素でマークアップしても良いという話も、将来的には当たり前になっているのかもしれません。仮に Google が公式にそういったマークアップを適切に認識していると発表したとしたら、一気にそのようなマークアップが当たり前になるかもしれません。あくまでも妄想ですが…
こういった「べき論」は時代とともに変わっていきます。HTML と言えども時代とともに慣例が作られるというのは興味深いですね（実際に作られるかどうかは分かりませんけど…）。
今回は以上で終わりです。最後まで読んでくださりありがとうございました。それでは次回の記事までごきげんよう。
