その`section`、本当に必要？見出しとの不可分な関係を再定義する

フロントエンドの現場でレビューをしていると、必ずと言っていいほど遭遇するのが「div代わりとしての`section`」です。CSSでスタイルを当てたいがために、あるいはなんとなくマークアップが構造的になる気がして、とりあえず`section`で囲ってしまう。

これ、実はHTMLのセマンティクス（意味論）から見るとかなり危うい実装なんです。今回は、HTMLの仕様書を噛み砕きつつ、現場で「恥をかかない」ための`section`要素の正しい使い方を深掘りします。

—

section要素の「定義」を正しく捉える

HTML仕様において、`section`は「文書やアプリケーションの一般的なセクション」と定義されています。ここでの「セクション」とは、テーマごとにグループ化されたコンテンツのまとまりを指します。

重要なのは、W3Cが提示しているこの原則です。

> 「section要素は、見出し（h1-h6）を伴うことが強く推奨される」

もし、その要素が見出しを持たないのであれば、それは`section`ではなく、単なる汎用コンテナである`div`を使うのが適切です。見出しがないということは、そのセクションが文書のアウトライン（目次）の一部として機能しないことを意味するからです。

ブラウザはどう解釈しているのか？

ブラウザのアクセシビリティツリーを覗いたことはありますか？

`section`に適切に見出しを配置すると、ブラウザはそれを「リージョン（領域）」として認識し、スクリーンリーダーユーザーに対して「ここから新しいトピックが始まりますよ」と伝えます。しかし、見出しがない`section`は、アクセシビリティツールから見れば「ただの無名な枠」に過ぎません。

これでは、セマンティックHTMLを採用する最大のメリットである「文書構造の明示」が台無しです。機械的に`section`を乱用するのではなく、「ここに目出しがあるか？」を自問自答してください。ないなら、迷わず`div`を選びましょう。

—

実践：綺麗なマークアップのサンプルコード

以下に、実務でそのまま使える「正しい構造」のテンプレートを用意しました。このコードは、セマンティクスを意識しつつ、保守性の高いCSS設計（BEM等のコンポーネント指向）とも親和性が高い形にしています。

—

現場で役立つ「判断基準」のTips

最後に、明日からのコーディングで迷わないための判断基準を3つ置いておきます。

1. 「見出しはあるか？」

• Yes: `section`を検討。
• No: `div`で十分。

2. 「その領域は独立したトピックか？」

• スタイルを適用するためだけのグループ化なら、迷わず`div`です。クラス名で役割を表現しましょう。

3. 「ナビゲーション要素か？」

• もしその領域がサイト内リンクの集まりなら、`section`ではなく`nav`です。

「HTMLのタグ一つで、Webのアクセシビリティは劇的に変わります」。

無機質なコードに魂を吹き込むのは、私たちフロントエンドエンジニアの仕事です。ただのHTMLタグと思わず、情報の「構造」を設計しているという意識を持つだけで、あなたのコードの質は一段上のレベルへと引き上げられるはずです。

さあ、エディタを開いて、プロジェクトの`section`たちを一度見直してみてください。不要な`section`が見つかったら、それはコードがスリムになるチャンスですよ。