「articleか、sectionか」で迷う君へ。セマンティックHTMLの本質を紐解く思考法

フロントエンド開発の現場で、マークアップのレビューをしていると必ずと言っていいほど議論になるのが「`article`と`section`、どっちを使うべき問題」だ。

「とりあえず全部`div`でいいじゃん」というのは新人の頃の甘え。我々プロフェッショナルがHTMLを書く理由は、単なるレイアウトのためではなく、「ブラウザや検索エンジンに対して、この文書の構造を正確に伝えること」にある。今回は、この2つのタグを迷わず選べるようになるための「現場の思考フロー」を共有しよう。

—

1. そもそも仕様書は何を語っているのか

W3Cの仕様を噛み砕くと、本質はシンプルだ。

• `
  
  `: 「独立したコンテンツ」。それ単体で配信、転載、RSSフィードに流しても意味が通じるもの。
• `
  
  `: 「文書のテーマごとのグループ」。見出し（h1-h6）を伴うことが前提の、論理的な区切り。

ここで重要なのは、「入れ子にできるか？」という視点だ。`article`の中に`section`を入れることもあれば、`section`の中に`article`を入れることもある。これらは対立する概念ではなく、「コンテンツの性質」が違うだけなのだ。

—

2. 迷った時の「独立性テスト」フロー

コードを書く手が止まったら、以下の問いを自分自身に投げかけてみてほしい。

1. 「この記事から切り出して、別の場所（ブログのサイドバーや別のサイト）に置いても、文脈が壊れずに意味が通じるか？」

• Yes → `
  
  ` を検討する。
• No → 次へ。

2. 「そのセクションは、全体の文書構造における『章』や『トピック』の一部か？」

• Yes → `
  
  ` を採用する。

現場のリアルな知見:
「見出し（hタグ）があるから全部`section`だ！」と脊髄反射するのは危険だ。例えば、ブログのコメント欄は、1つひとつのコメントがそれ単体で独立した「投稿」であるため、`section`ではなく`article`を使うのがセマンティックな正解だ。

—

3. 実践！現場で使えるサンプルコード

では、これらをどう組み合わせるのがベストプラクティスなのか。モダンなブログ記事の構造を例に見てみよう。

—

4. ブラウザが「裏側」でやっていること

なぜここまでこだわるのか？ それはブラウザのアクセシビリティツリー（Accessibility Tree）に直結するからだ。

スクリーンリーダーのユーザーは、ページ全体を読まない。彼らはショートカットキーを使って「次の見出しへ」「次のセクションへ」「次の記事へ」とジャンプする。

もし、ここをすべて`div`で埋めていたらどうなるか？ ブラウザはどこが主要なコンテンツで、どこが独立した記事なのかを推測できず、ユーザーは迷子になる。正しくタグを使うことは、「目が見えないユーザーのためのナビゲーションマップを作る行為」なのだ。

最後に：完璧主義になりすぎないで

もちろん、「絶対にこのルールでないとダメ」という厳格なコンプライアンスがあるわけではない。しかし、中級エンジニアの君たちには、「なぜそのタグを選んだのか？」をコードレビューで語れるようになってほしい。

「なんとなく`div`」を卒業し、「このコンテンツは独立しているから`article`だ」と言えるだけで、君のコードの質は一段上のレイヤーに到達する。

さあ、エディタを開いて、君が書いているその`div`たちを、もう一度見つめ直してみよう。そこに隠された「意味」をマークアップに落とし込む作業こそが、フロントエンドエンジニアの醍醐味なんだから。