HTML構造化：正しい骨組みの作り方

Webサイトを作る際、すべてを <div> タグだけで作ってしまうのではなく、その場所がどんな役割を持っているのかを示す「構造化タグ（セマンティック要素）」を使うことが推奨されています。

Webサイトの標準的なレイアウト構造

一般的なWebサイトは、以下のようなパーツを組み合わせて構成されます。

HTML構造化タグの構成図 出典：note - HTML構造化の基本（d_create_dai様）

主要な構造化タグ一覧

タグ役割・意味
<header>ページ上部の紹介・ナビゲーション（ロゴやメニューなど）
<nav>主要なナビゲーション（メニュー項目）の集まり
<main>そのページのメインコンテンツ（1ページに1つだけ）
<article>記事単体として完結している内容（ブログ記事など）
<section>文書内の一般的な「章」や「節」などの区切り
<aside>補足情報（サイドバーや広告など、本筋とは別な内容）
<footer>ページ最下部の情報（著作権、連絡先など）

なぜ構造化が必要なのか？

  1. SEO（検索エンジン最適化）に有利： Googleなどのロボットがサイトの内容を正しく理解しやすくなります。
  2. アクセシビリティの向上： 音声読み上げソフトなどを使う人が、情報を探しやすくなります。
  3. メンテナンス性の向上： コードを見ただけで、どこがどのパーツなのか一目でわかるようになります。

設計時のポイント