ページ構造を作るための基本タグについて

Webページは、見た目を整えるだけでなく、「どの部分がどんな役割を持っているのか」をはっきりさせることで、読みやすく、管理しやすく、検索エンジンにも理解されやすい構造になります。
divは役割上では意味を持たない汎用コンテナですが、ページを区切ったりデザイン調整のために不可欠な存在です。
セマンティックタグを使う前提として、まずdivの役割を理解しておくと、その後のレイアウト設計がとてもスムーズになります。
HTML5以降では、ページの役割ごとに使えるセマンティック（意味のある）タグであるheader・main・footer・nav・section・article・asideが追加されました。

意味を持たないコンテナ（div）

divタグは「特定の意味を持たない」コンテナです。

構文

<div>...</div>

divタグはブロック要素で、単にグループ化したい、CSSを当てたい、パーツとしてまとめたいといった目的で使われます。

コード例

<div>
    <h3>お知らせ</h3>
    <p>メンテナンスのお知らせ</p>
</div>

出力例

html5以前のdivはcssを使い、意味を持たせてレイアウトに使用されていました。
しかし、divタグを複数使いすぎることで可読性が低くなり、修正するにも時間を要していましたが、html5以降はheaderやnavなどの意味を持つタグの出現により、「適切なセマンティックタグが存在しない場面」、「装飾やレイアウトの区分として必要な場面」で使用するのが基本となりました。

ページやセクションの冒頭を表す領域（header）

ページ全体または各セクションの「冒頭部分」に置くまとまりを表します。

構文

<header>...</header>

headerタグはブロック要素で、タイトル、ロゴ、リード文など、その部分の概要を示す内容を含めます。

コード例

<header>
    <h1>サイトのタイトル</h1>
    <p>紹介文</p>
</header>

出力例

headerはページ内に複数配置できます。
articleの中に置いても「その記事のヘッダー」として機能します。
もし特別な意味づけがなく、単に見た目だけを整えたい場合であれば、headerではなくdivを使う選択もできます。

主要な移動リンクをまとめる部分（nav）

ページ内の移動（ナビゲーション）を担うリンクのまとまりを示します。

構文

<nav>...</nav>

navタグはブロック要素で、グローバルメニューや重要なリンクをまとめる場所として最適です。

コード例

<nav>
    <a href="../about.html">About</a>
    <a href="../php/contact.php">Contact</a>
</nav>

コード例

ページ内に複数navを置くことも可能です。
もし単なるリンク集や補助的なリンクであれば、navではなくdivを使うこともできます。

ページのメイン部分（main）

そのページで最も重要な内容を含む領域です。

構文

<main>...</main>

mainタグはブロック要素で、1ページにつき1つだけ配置できます。

コード例

<main>
    <h2>コンテンツタイトル</h2>
    <p>メインコンテンツとなる領域です。</p>
</main>

出力例

mainはarticleにネストできないため、mainの外側には、headerやfooterなどの「まわりの要素」が配置されることが多いです。
ページの主要部分ではない要素を入れないように注意します。
なお、出力例ではdivタグを使っています。

独立した記事として成立する部分（article）

単体で成り立つ記事のまとまりを表します。

構文

<article>...</article>

articleタグはブロック要素で、ブログ記事、ニュース、商品説明などに向いています。

コード例

<article>
    <h3>フォームの基本</h3>
    <p>フォームは複数の入力部品を組み合わせて構成します。</p>
</article>

出力例

article 内にheaderやfooterを設定しても構いません。
もし“記事”と呼べるほど独立していない場合は、sectionまたはdivを選ぶのが最適です。

章のまとまり（section）

内容を「章」や「セクション」ごとのまとまりとして区切るために使われます。

構文

<section>...</section>

sectionタグはブロック要素で、テーマごとに区切るためのものです。

コード例

<section>
    <h2>入力フォームについて</h2>
</section>

出力例

sectionとarticleは使い方を混同しやすい要素です。
例えば、新聞でスクラップできるものが記事（＝article）、その記事の分類で集めたスクラップブックのページがテーマ（＝section）と考えるとわかりやすいと思います。

補足情報やサイドバー（aside）

メインの流れに直接関係しない補足情報を示すためのタグです。

構文

<aside>...</aside>

asideタグはブロック要素で、サイドバーのほか、関連情報や著者紹介などにも使用されます。
なお、サイドメニューだからこのタグを使用するというわけではありません。

コード例

<aside>
    <p>この記事の関連リンク</p>
</aside>

出力例

主要な内容に含める必要のないけれど関連度の高い情報を置く場所として便利です。
レイアウト目的のみであればdivで代用できます。
WordやPowerPointで言う脚注として使用すると考えるとわかりやすいです。

まとめや著作情報（footer）

ページまたはセクションの一番下に置く締めの部分です。

構文

<footer>...</footer>

footerタグはブロック要素で、コピーライトやコンテンツの羅列にも使用できます。

コード例

<footer>
    <p>©2025 管理者</p>
</footer>

コード例

headerと同じく、ページ全体だけでなくarticleなどの内部にも独自のfooterを持たせることができます。
特別な意味づけをせず単に区切りたいだけであれば、divに置き換えることもできます。

footerと一緒によく使われるタグ（address）

文書やページの作成者・運営者の連絡先を示すためのタグです。

構文

<address>...</address>

addressタグはブロック要素で、メールアドレス・所在地・運営者名など、著者情報をまとめる場所としてfooterに置かれることが多い要素です。

<footer>
    <address>
        お問い合わせ：example@example.com<br />
        〒000-0000 東京都サンプル区サンプル1-2-3
    </address>
</footer>

出力例

「連絡先を示すタグ」であって、通常のフッター文（コピーライトなど）とは用途が異なります。
また、著者名を示すだけならaddressではなくpやsmallを使って問題ありません。

構造タグを理解するために

header・main・section・article・aside といったセマンティックタグは、慣れるまでは「どこで使うのが正しいのか」が分かりにくい場合があります。
特にsection、article、asideは理解しにくいため、実際のWebページとは少し離れた「スーパーのチラシ」を使って例えると、それぞれの役割が非常に分かりやすくなります。

まず、チラシの一番上にある店舗名やロゴの部分はheaderに対応します。
その下で大きな分類として「果物コーナー」「野菜コーナー」と分かれている部分は、それぞれがひとつのsectionです。
section の中で個別に表示されている「桃」「キウイ」「ぶどう」などの商品ひとつひとつは、単体でも情報として成立するためarticleに相当します。

一方で、チラシの下部にある「別店舗の案内」は、メインの商品情報とは直接関係しない補足情報です。
このような内容はasideとして扱われます。
最後の締めとして配置される住所や問い合わせ情報はfooterに相当します。

このように、セマンティックタグは「何を意味するまとまりか」を基準に選びます。
スーパーのチラシのように現実の紙面レイアウトへ置き換えて考えると、HTMLの構造をより具体的にイメージしやすくなります。