見出しタグの「正しい」構造は、単なるSEO対策じゃない。アクセシビリティの生命線だ。

フロントエンドの実務に慣れてくると、つい「見た目（デザイン）」を優先してタグを選んでしまう誘惑に駆られることがあるよね。「ここは少し小さく見せたいから`h4`でいいや」とか、「`h1`はロゴに使ったから、次は`h3`から始めよう」なんていう判断。

結論から言おう。それは「文書の骨格を破壊している」のと同じだ。

今日は、なぜ見出しの階層構造（アウトライン）が重要なのか、そしてブラウザが裏側で我々のマークアップをどう解釈しているのか、シニアの視点から深掘りしていこう。

—

1. ブラウザと支援技術が「見出し」をどう見ているか

HTMLの`h1`〜`h6`タグは、単なるフォントサイズの指定じゃない。ブラウザが生成する「アクセシビリティツリー」において、文書の構造を定義するランドマークとして機能しているんだ。

スクリーンリーダーのユーザーは、ページを一行ずつ読み上げるのではなく、しばしば「見出しジャンプ機能」を使って文書をスキップ移動する。もし君が階層を飛ばしてマークアップしていたら、そのユーザーは目隠しをされた状態で迷路に放り込まれることになる。

• `h1`: ページのメインタイトル。1ページに1つが理想（HTML5以降は複数許容されることもあるが、混乱を避けるために1つに絞るのが現場の定石）。
• `h2`〜`h6`: セクションの階層。親要素の中身が、その下のセクションで構成されていることを示す。

重要なルール：階層を飛ばさない。
`h1`の次にいきなり`h4`が出てくる構造は、情報の親子関係が断絶していることを意味する。ブラウザのレンダリングエンジンは文句を言わないが、支援技術にとっては「情報の欠落」として認識されるんだ。

—

2. 実践：クリーンで堅牢なアウトラインのサンプルコード

では、現場でそのまま使える「綺麗な構造」のサンプルを見てみよう。ポイントは、デザインのサイズに関わらず、論理的な階層を守ることだ。

プロジェクト管理ツールのダッシュボード

現場で役立つTips：`visually-hidden`の活用

デザイン上は見出しを隠したい（あるいは別のデザインで代用したい）が、文書構造としては必要、というケースは多々ある。そんな時は、アクセシビリティを損なわずに視覚的にだけ消すユーティリティクラスを使うのが正解だ。

/ スクリーンリーダーには読ませるが、見た目からは消す /
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}

—

3. なぜ「構造」が開発者の評価を分けるのか

中級エンジニアが突き当たる壁の一つに、「CSSによる見た目の制御」と「HTMLによる意味付け」の分離がある。

初心者は「大きな文字にしたいから`h1`にする」という思考プロセスを持つ。しかし、シニアは「このセクションは文書全体のどの位置付けにあるか？」を基準にタグを選び、CSSで「その見出しにふさわしいサイズや色」を当てる。

これが徹底できているコードベースは、将来的な改修やデザインリニューアルの際、圧倒的に負債になりにくい。構造が正しいと、CSSの修正だけで見た目をガラリと変えられるからだ。

まとめ：次にコードを書くとき、自分に問いかけてほしいこと

1. 「このタグは、文書のアウトラインとして正しい位置にあるか？」
2. 「階層を飛ばしていないか？」
3. 「見た目のために意味を犠牲にしていないか？」

HTMLは単なる情報のガワじゃない。君たちが書くコードは、誰かにとっての「情報の道しるべ」になる。この意識を持つだけで、君が書くマークアップの質は確実に一段上のレベルへ到達するはずだ。

綺麗なコードは、書く人間の理性を表す。明日からの実装で、ぜひ意識してみてくれ。