HTMLの「セクション」って結局どう書けばいいの？アウトラインの理想と現実

Web制作を始めたばかりの頃、「`header`や`section`タグをちゃんと使えば、勝手にページ構造が綺麗に整理されるんだ！」なんてワクワクしたことはありませんか？

実はこれ、半分正解で半分は……ちょっとした「夢」のようなお話なんです。今日は、HTMLのセクションタグと、私たちが知っておくべき「アウトラインの現実」について、現場の知見を交えて優しくお話ししますね。

—

HTMLの「アウトラインアルゴリズム」という夢

HTML5が登場した頃、「アウトラインアルゴリズム」という概念が注目されました。これは、「`section`タグで囲めば、その中の見出し（h1〜h6）が自動的に階層化されて、完璧な目次ができる！」という夢のような仕組みです。

例えば、こんなイメージです。

「これなら、どこに`h1`を何個置いても、`section`さえ入れ子にしておけば安心だよね！」と思われていました。しかし、現実はそう甘くありませんでした。

—

なぜ「夢」は叶わなかったのか？

悲しいことに、この「自動的に構造を整理してくれる仕組み」は、主要なブラウザ（ChromeやSafariなど）や、視覚障害者の方が使うスクリーンリーダーなどの読み上げソフトに、ほとんど実装されなかったのです。

つまり、`section`タグをどれだけ入れ子にしても、ブラウザは「おっ、ここはひとつの塊だね」とは認識してくれますが、中の見出しとの論理的な親子関係までは、実は上手く理解してくれません。

「えっ、じゃあどうすればいいの！？」と焦らなくて大丈夫ですよ。今から一番確実で、プロも現場で守っている「王道」をお伝えしますね。

—

現場の答え：見出し（h1-h6）で構造を作る

ブラウザが自動でやってくれないなら、私たちが「人間にも機械にも分かりやすい図面」を書いてあげればいいんです。そのための最も強力な武器が、昔ながらの`h1`〜`h6`タグです。

良い構造の作り方（例：カフェのサイト）

料理のレシピ本を想像してみてください。章があって、節があって、項がある。これと同じように、見出しの番号を正しく使うだけで、誰にとっても読みやすい構造になります。

この書き方のポイント

1. 見出しのレベルを飛ばさない: `h2`の次にいきなり`h4`が来ると、読んでいる人は「あれ、飛ばした？」と不安になります。階段を一段ずつ登るように書くのがコツです。
2. `section`は「意味のある塊」に: `section`はあくまで「意味のまとまり」を示す箱です。見出しの補助として使いましょう。
3. `article`は「独立したもの」に: その部分だけを切り取っても意味が通じる内容（ブログ記事、ニュースのトピックなど）なら、`article`を使うのがベストです。

—

まとめ：難しく考えすぎないで！

「アウトラインアルゴリズムが動かないなら、HTMLを書く意味がないのでは？」なんて思う必要は全くありません。

`header`, `main`, `footer`といったセクションタグは、「ここからがメニューで、ここが本文ですよ」と、ブラウザや検索エンジンに目印を教えるための「付箋（ふせん）」だと考えてみてください。

1. 見出し（h1-h6）で「階層」を作る（本の目次を作るイメージ）
2. セクションタグで「役割」を教える（付箋を貼るイメージ）

この2つを意識するだけで、あなたの書くHTMLは、誰が見ても整理整頓された、とても美しいコードになります。

最初は完璧にできなくても大丈夫。少しずつ、自分が作るWebサイトに「意味」を持たせていく感覚を楽しんでみてくださいね。応援しています！