セマンティックHTML

30秒でわかる要点

• セマンティックHTMLは、見た目だけでなく内容の役割に合うHTML要素を使ってページを構成することです。

• header、nav、main、article、section、footer、見出し、リストなどを適切に使うと、ブラウザー、支援技術、クローラーが構造を理解しやすくなります。

• リンクはa、操作はbutton、見出しはh1〜h6を使います。

• 要素を使うだけで内容の意味が自動的に正しくなるわけではありません。見出しと本文の関係も必要です。

• キーボード操作、見出し一覧、リンク一覧を確認し、視覚表示なしでも構造が伝わるか検査します。

セマンティックHTMLが伝える情報

セマンティックHTMLは、見た目だけでなく内容の役割に合うHTML要素を使ってページを構成することです。

主な検索表記：セマンティック HTML タグ、セマンティックHTML

セマンティックHTMLとページ本文の関係

header、nav、main、article、section、footer、見出し、リストなどを適切に使うと、ブラウザー、支援技術、クローラーが構造を理解しやすくなります。

マークアップの確認方法

リンクはa、操作はbutton、見出しはh1〜h6を使います。CSSの見た目だけで役割を代替しないようにします。

セマンティックHTMLで起きやすい誤解

要素を使うだけで内容の意味が自動的に正しくなるわけではありません。見出しと本文の関係も必要です。

実務チェックリスト

• リンクはa、操作はbutton、見出しはh1〜h6を使います。

• CSSの見た目だけで役割を代替しないようにします。

• キーボード操作、見出し一覧、リンク一覧を確認し、視覚表示なしでも構造が伝わるか検査します。

参考資料

仕様や検索機能は変更されることがあります。実装時には、次の公式資料の最新版も確認してください。

• 検索エンジン最適化（SEO）スターター ガイド（Google 検索セントラル）