【HTML5】main・article・sectionの違いは？SEOに強いタグの正しい使い方を徹底解説
「Webサイトなんて、見た目が整っていれば全部divタグで作っても問題ないのでは？」
コーディングを勉強し始めた頃、誰もが一度はこう思いますよね。確かに、ブラウザ上の見た目は変わりません。しかし、プロのコーダーやエンジニアがタグを厳密に使い分けるのには、明確な理由があります。
結論からお伝えします。mainやarticleなどのタグを正しく使うことは、Googleなどの検索エンジンに対して、Webサイトの「正確な地図」を渡す作業です。
地図がなければ、Googleのロボットはどこが重要な情報か迷ってしまいます。逆に、正しい地図があれば、あなたのサイトの価値を正しく理解してもらえます。つまり、正しいHTMLタグの記述は、最も基本的かつ強力なSEO対策（※1）なのです。
この記事では、迷いやすい8つのタグの「本当の役割」と「現場で使える判断基準」を、初心者の方にも分かりやすく解説します。
なぜdivだけではダメなのか？SEOとアクセシビリティへの影響
HTML5から導入されたmainやarticleなどのタグは、「セマンティック（意味論的）なタグ」と呼ばれています。これらを使うメリットは主に2つあります。
1. 検索エンジン（Google）に「ページの主役」を伝えるため
Googleのクローラー（※2）は、人間のように目で見て「ここが記事の本文だ」と判断しているわけではありません。コードを見て判断しています。
divだらけのコードは、どこが重要か分からない「のっぺらぼう」な状態です。一方、mainやarticleが適切に使われていると、「ここが評価すべきメインコンテンツだ」と即座に理解でき、検索順位の適正な評価につながります。
2. アクセシビリティ（※3）の向上
これが非常に重要です。目の不自由な方が利用するスクリーンリーダー（音声読み上げソフト）は、これらのタグを頼りにナビゲーションを行います。
例えば、navタグがあれば「ここはメニューだから飛ばして本文へ行こう」といった操作が可能になります。「誰にでも使いやすいサイト」を作ることは、Googleが現在最も重視している評価基準の一つ（E-E-A-T）でもあります。
【役割別】主要タグ8選の正しい意味と使い分けルール
それでは、現場で頻出するタグの正しい使い方を見ていきましょう。「どう使い分けるか」の判断基準を中心にお伝えします。
1. main：ページ内で「1回」しか使えない絶対的主役
そのページの中心となるコンテンツを囲むタグです。
- ルール: 1ページにつき1回しか使えません（※
hidden属性等で隠されている場合を除く）。 - 配置: ヘッダー、フッター、サイドバーなど、どのページにも共通する部分は含めず、「そのページ固有の中身」だけを入れます。
2. article vs section：もう迷わない！明確な判断基準
ここが一番の悩みどころですよね。以下の基準で使い分けましょう。
| タグ | 意味 | 判断基準（自分への問いかけ） |
|---|---|---|
| article | 自己完結する記事 | 「この部分だけ切り取って、RSS（※4）で配信したり別サイトに貼っても意味が通じるか？」 |
| section | 章・節・区切り | 「見出し（h2〜h6）をつけて整理できる、テーマ性のある一塊か？」 |
- articleの例: ブログの個別記事、ニュースの一項目、SNSの投稿ひとつひとつ。
- sectionの例: 記事内の「章」、トップページの「会社概要エリア」「サービス紹介エリア」。
- ポイント:
sectionを使うときは、原則として中に見出し（hタグ）を入れるのがルールです。見出しが不要なレイアウト目的のまとまりなら、無理せずdivを使いましょう。
3. nav：主要なメニューのみに限定して使う
サイト内の移動に使われる「ナビゲーション」を示します。
- 使いどころ: グローバルナビゲーション（ヘッダーのメニュー）、パンくずリスト、目次など。
- 注意点: ページ内のあらゆるリンク集に使う必要はありません。フッターにある小さなリンク集などは
divなどで十分です。
4. header / footer：サイトの「顔」と「土台」を作る
これらはページ全体だけでなく、articleやsectionの中でも使えるのがポイントです。
- header: ロゴやナビゲーションだけでなく、ブログ記事の「タイトル＋投稿日」を囲むのにも使われます。
- footer: ページ最下部のコピーライトだけでなく、記事ごとの「タグ一覧」や「SNSシェアボタン」を囲む際にも使えます。
5. aside：本文から切り離せる補足情報
メインコンテンツ（main）とは直接関係が薄い、あるいは切り離しても問題ない情報です。
- 例: サイドバー、広告バナー、関連記事リスト、「用語解説」コラムなど。
ここが落とし穴！間違いやすい「address」タグの注意点
情報の信頼性を担保する上で重要なのがaddressタグですが、名前のせいで誤解されがちです。
物理的な「住所」だけを示すタグではありません
addressは、「そのドキュメントや記事の作成者・所有者への連絡先」を示すためのタグです。
- OKな使い方:
- フッター内で、サイト運営者の連絡先（メールリンクや問い合わせページへのリンク）を囲む。
- ブログ記事（
article）内で、著者のプロフィールやSNSリンクを囲む。
- NGな使い方:
- 会社概要ページで、単に「所在地：東京都〇〇区…」という場所を示すためだけに使う。
住所を表示したい場合は、pタグや、構造化データ（※5）を用いるのが現代のSEOでは一般的です。
実践！Googleに好かれる理想的なHTML構造サンプル
これまでの解説をまとめた、ブログ記事ページの理想的なマークアップ例です。
ぜひ、ご自身のコードと比較してみてください。
HTML
<body>
<header>
<h1>WEBコーディング入門ブログ</h1>
<nav>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/about">当サイトについて</a></li>
</ul>
</nav>
</header>
<div class="container">
<main>
<article>
<header>
<h1>HTML5の正しいタグの使い分け</h1>
<p><time datetime="2024-04-01">2024年4月1日</time></p>
</header>
<div class="lead">
<p>今日はタグの使い分けについて解説します...</p>
</div>
<section>
<h2>sectionタグの使い方</h2>
<p>sectionはテーマの区切りを表します。</p>
</section>
<section>
<h2>articleタグの使い方</h2>
<p>articleは独立したコンテンツを表します。</p>
</section>
<footer>
<address>著者：<a href="/profile">SEOライター太郎</a></address>
</footer>
</article>
</main>
<aside>
<h3>カテゴリー</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</aside>
</div>
<footer>
<p><small>© 2024 WEB Coding Blog</small></p>
</footer>
</body>まとめ：タグの意味を理解して「伝わるコード」を書こう
ここまで多くのタグを紹介してきましたが、一度にすべて完璧にする必要はありません。
まずは、「divで囲っていたメインコンテンツをmainに変える」。
次に、「ブログ記事全体をarticleで囲む」。
これだけでも、Googleへの伝わりやすさは大きく変わります。
正しいタグ選びは、あなたのサイトの情報を必要としているユーザーへ、適切に届けるための「思いやり」です。
今日書くコードから、少しずつ意識を変えてみませんか？
もし「この構成でSEO的に大丈夫かな？」と迷ったら、いつでもこの記事を見返して、地図作りの参考にしてくださいね。
用語解説（※数字）
- （※1）SEO（Search Engine Optimization）： 検索エンジン最適化。Googleなどの検索結果で、自分のサイトを多く露出させるための対策のこと。
- （※2）クローラー： Webサイトの情報を収集するために、インターネット上を自動で巡回しているロボット（プログラム）。
- （※3）アクセシビリティ： 高齢者や障害者を含む、誰もが支障なくサービスやコンテンツを利用できる状態のこと。
- （※4）RSS： Webサイトの更新情報などを配信するためのフォーマット。ブログリーダーなどで使われる。
- （※5）構造化データ： 検索エンジンにより詳細な情報を伝えるための、特定の形式で書かれたコードのこと（JSON-LDなど）。住所や評価、イベント情報などを伝えるのによく使われる。
