`ばかりで組んでしまいがちですよね。「とりあえず動けばいいや」と積み木のように重ねていくうちに、気づけば「あれ、どこに何があるんだっけ？」と迷子になってしまう……。実は、ベテランのエンジニアも最初はみんなそこを通ってきました。大丈夫、少しずつ整理していきましょう。

今日は、Webサイトを「誰にとっても分かりやすい、整理整頓された本棚」に変える魔法、セマンティックHTMLの検証方法についてお話しします。

—

そもそも「セマンティック」って何？

難しい言葉ですが、簡単に言うと「HTMLに意味を持たせること」です。

想像してみてください。あなたは今、スーパーマーケットに買い物に来ています。「お惣菜」コーナーと書かれた看板の下に「歯ブラシ」が置いてあったらどう思いますか？ 「えっ、なんでここに？」と混乱しますよね。

Webサイトも同じです。ブラウザや、目の不自由な方が使う「スクリーンリーダー（読み上げソフト）」にとって、中身が何かを教えてあげるのが`header`や`main`といった「セクション構成要素」なんです。

• `header`：お店の入り口の看板（サイト名やロゴ）
• `nav`：店内案内図（メニュー）
• `main`：売り場（メインコンテンツ）
• `footer`：レジの先にあるインフォメーションボード（コピーライトや連絡先）

これらを正しく配置することで、誰が来ても「あ、ここは大事な場所だな」「ここはリンクだな」と直感的に理解できるようになります。

—

あなたのHTML、迷子になっていませんか？

では、自分が書いたHTMLが正しく整理されているか、どうやって確認すればいいのでしょうか？ 専門家も現場で必ず使っている、信頼できる「診断ツール」を2つ紹介しますね。

1. W3C Markup Validation Service（文法の先生）

[W3C Markup Validation Service](https://validator.w3.org/) は、いわば「HTMLの書き方チェック先生」です。

使い方は簡単。自分の書いたHTMLを丸ごとコピーして貼り付けるか、公開しているURLを入力するだけ。「文法ミスはないかな？」「セクションの入れ方はおかしくないかな？」と厳しく、でも愛を持ってチェックしてくれます。赤字が出ても焦らないでくださいね。「ここを直せばもっと良くなるよ！」というアドバイスをもらえたと思って、一つずつ修正していきましょう。

2. ブラウザの「アクセシビリティツリー」を確認する

実は、ChromeやEdgeなどのブラウザには、すでに強力な検証ツールが内蔵されています。

1. ブラウザで自分のサイトを開く
2. 右クリックして「検証（または要素の調査）」を選択
3. 「アクセシビリティ（Accessibility）」タブを開く

ここに表示されるツリー構造が、ブラウザが理解している「あなたのWebサイトの設計図」です。もし、ここに`main`や`nav`が正しく並んでいれば、それは完璧なセマンティックHTMLの証拠です！

—

シンプルなコード例で確認してみましょう

まずは、こんな基本の構成から意識してみるのが近道です。

私のおいしいレシピブログ

目次

1. そもそも「セマンティック」って何？
2. あなたのHTML、迷子になっていませんか？
3. 1. W3C Markup Validation Service（文法の先生）
4. 2. ブラウザの「アクセシビリティツリー」を確認する
5. シンプルなコード例で確認してみましょう
1. 今日のおすすめパスタ
   1. 最後に：完璧を目指さなくて大丈夫

今日のおすすめパスタ

トマトソースの作り方は……

このコードを眺めると、どこに何があるか一目瞭然ですよね。`article`の中に`h2`があるのも、「この記事のタイトルはこれだね」とブラウザが迷わず判断できる構造です。

—

最後に：完璧を目指さなくて大丈夫

「セマンティックHTMLってなんだか奥が深そう…」と身構える必要はありません。最初は「`