【6日でできるHTML＆CSS入門】Webページの基本構造

　Webページを作成する際には、「どこに何を配置するか」「情報をどのように分けてまとめるか」といったページ全体の基本構造を決めることがとても大切です。
　この構造を意識することで、読みやすく・探しやすいページになり、検索エンジンにも「構造的なWebサイト」として認識されやすくなります。
　ここでは、Webページの主要なパーツ（header、main、footerなど）と、それを記述するためのHTMLタグについて、分かりやすく解説します。

１．Webページの基本構成を知ろう

1.1. 情報を分類するための主要タグ

Webページは、主に次のような情報のまとまり（ブロック）で構成されています。

ブロック名	主な内容	タグ例
ヘッダ	ページタイトル、ロゴ、ナビゲーション	`<header>`
メイン	本文・主な情報	`<main>`
サイドバー・補助	サブ情報、リンク集、広告など	`<aside>`
フッタ	お問い合わせ、コピーライト、補足情報	`<footer>`

1.2. 代表的なページ構造の例

多くのWebページは、下記のようなレイアウトになっています。

┌───────────────┐
│ ヘッダ（header）             │
├─────────┬─────┤
│ メイン（main）   │サイドバー│
├─────────┴─────┤
│ フッタ（footer）             │
└───────────────┘

２．基本構造をHTMLで記述する

2.1. サンプルHTML

以下のサンプルは、ヘッダ・メイン・フッタを持つ、もっとも基本的なWebページの構造です。

ファイル名： lesson36_1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>基本構造サンプル</title>
  <style>
    header, footer {
      background: #e3f2fd;
      padding: 16px;
      text-align: center;
    }
    main {
      background: #fffde7;
      padding: 24px 16px;
      min-height: 200px;
    }
    nav ul {
      display: flex;
      justify-content: center;
      gap: 18px;
      list-style: none;
      padding: 0;
      margin: 12px 0 0 0;
    }
    aside {
      background: #f9fbe7;
      padding: 14px;
      margin: 16px 0;
      font-size: 0.97em;
    }
    small {
      font-size: 0.85em;
      color: #888;
    }
  </style>
</head>
<body>
  <header>
    <h1>サンプルサイトのタイトル</h1>
    <nav>
      <ul>
        <li><a href="#">トップ</a></li>
        <li><a href="#">サービス</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <section>
        <h2>メインセクション1</h2>
        <p>この部分にページの主な内容が入ります。</p>
      </section>
      <section>
        <h2>メインセクション2</h2>
        <p>さらに情報を追加することもできます。</p>
      </section>
    </article>
    <aside>
      サイドバー情報や補助的な案内はこちらに記載できます。
    </aside>
  </main>

  <footer>
    <ul>
      <li><a href="#">プライバシーポリシー</a></li>
      <li><a href="#">利用規約</a></li>
    </ul>
    <p>アクセス情報：東京都新宿区サンプル1-2-3</p>
    <small>Copyright © 2025 サンプルサイト All rights reserved.</small>
  </footer>
</body>
</html>

表示結果

header：ページの一番上（タイトルやナビゲーション）
main：メインコンテンツ（記事、サイドバーなど）
footer：ページの一番下（お問い合わせや著作権）

３．各タグの役割と使い方の解説

タグ	役割	詳細解説
`<header>`	ページやセクションの上部情報	サイト名、ロゴ、ナビゲーション（`<nav>`）などを内包
`<nav>`	ナビゲーション	サイト内メニューやリンク集に使う
`<main>`	主要コンテンツ	1ページに1つだけ。ページで一番重要な本文エリアに
`<aside>`	補助的な情報やサイドバー	メインの補足情報、関連リンク、広告などに最適
`<footer>`	下部情報	サブナビゲーション、連絡先、著作権表記、小さめテキスト（`<small>`）など

h1タグはページのタイトルやロゴに使われることが多い。
smallタグは、著作権表示や補足説明などに使われる。

４．なぜこの構造が大切なのか？

SEO対策
検索エンジンがWebページの意味を理解しやすくなり、上位表示につながりやすくなります。
保守・デザインが楽
部分ごとにスタイルを当てやすく、レイアウトやデザインの修正が容易です。
アクセシビリティ向上
スクリーンリーダーなど補助技術でも、どの部分が何か正しく認識されます。

５．タグ・CSSプロパティ一覧

タグ/プロパティ	意味・用途
`<header>`	ページやセクションのヘッダー情報
`<nav>`	ナビゲーションリンクグループ
`<main>`	ページ内で最も重要なコンテンツ
`<aside>`	補助情報・サイドバー等
`<footer>`	フッター・ページ下部情報
`<h1>～<h6>`	見出し
`<ul>`, `<li>`	リスト（ナビゲーションやフッターにも活用）
`<small>`	小さめの文字
`background`	背景色の指定
`padding`	余白の指定
`text-align`	文字やリストの揃え位置
`min-height`	最小高さの指定

まとめ

Webページの基本構造を正しく設計することで、「見やすい」「検索エンジンに強い」「保守しやすい」ページが作れます。
header、main、footerなどのタグを活用して、情報を整理し、分かりやすいレイアウトを意識しましょう。
さらにデザインやSEO、アクセシビリティを向上させるためにも、構造を意識したHTML作成を心がけることが大切です。

【6日でできるHTML＆CSS入門】Webページの基本構造