[2023-08-22 更新]
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 要素が良くわからないという人は気を付けるようにしましょう。
section 要素のカテゴリの定義から見た解釈
WHATWG HTML 仕様のうえで、HTML 要素は必ず何かしらのカテゴリに属します。section 要素が属するカテゴリはセクショニング・コンテント（Sectioning content）です。このセクショニング・コンテントは「header と footer 要素のスコープを定義する」ものと規定されています。
この規定を分かりやすく言い換えると、もし header 要素と footer 要素をマークアップするなら、どのコンテンツの範囲に対するヘッダーもしくはフッターなのかを示すもの、ということになります。
この規定を見て意外に感じたのではないでしょうか。章や節といったコンテンツの範囲を意味するような定義ではありません。
実は、以前の WHATWG HTML 仕様ではセクションというものはページのアウトライン形成において重要な役割を果たしていました。ところが、2022 年 7 月の HTML 仕様のアップデートによってアウトライン形成に section 要素などのセクション要素は一切関与しないことになりました（このあたりの詳細は記事「自動的に目次が作れるアウトライン」をご覧ください）。
以上のような事情もあり、セクショニング・コンテントの定義は非常に質素なものとなっています。しかし、セクショニング・コンテントがヘッダーとフッターを入れて遜色ないコンテンツの範囲を表すのであれば、当然、そこには見出しを入れるにふさわしい、もっと言うと、入れるべき、と理解するべきではないでしょうか。暗に「章」や「節」を指していると考えて問題ないでしょう。
ページ全体もセクションじゃない？
セクションの意味が分かると、このような疑問が出てきませんか？
「ページ全体もセクションじゃないの？見出し（タイトル）もあるわけだし。」
当然の疑問ですよね。であれば、こんなマークアップをしないといけないんじゃないの？と考えてしまいます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
<section>
<h1>ページタイトル</h1>
<p>本文…</p>
</section>
</body>
</html>
しかし、これは間違いです。section 要素でマークアップするべきコンテンツとは、ページ全体ではなく、ページ・コンテンツを分割するコンテンツ・グループです。
見出しは絶対に必要？
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 要素でマークアップしても良い、としていました。
ところが、2022 年 7 月に WHATWG の HTML 仕様がアップデートされ、section 要素などのセクションを表す要素で構造化したとしても、見出しレベルに応じた見出し要素（h1 ～ h6 要素）を使わなければいけないこととなりました。
いまでも、かつての WHATWG HTML 仕様に基づいた説明がネット上には残っていますので、注意してください。
まとめ
section 要素を最新の仕様から改めて解説しなおしてみましたが、腑に落ちましたでしょうか。section 要素をナウい div 要素と勘違いすることなく、適切な場所に使ってもらえることを願っております。
今回は以上で終わりです。最後まで読んでくださりありがとうございました。それでは次回の記事までごきげんよう。
