HTMLセマンティックタグ徹底解説｜header・main・section・articleを正しく使う方法
Web制作において、HTMLを「正しく」「意味を持って」書くことはSEO対策やアクセシビリティ向上のために非常に重要です。
その中心となるのが**セマンティックタグ（semantic tags）**です。
今回は特に初心者が混乱しやすい
<header><main><section><article>
の4つのセマンティックタグについて、具体的な使い方を徹底的に解説します。
Contents
セマンティックタグとは？
セマンティックタグとは、「このタグにはこういう意味がありますよ」と示すHTML要素のことです。
例えば、
<b>よりも<strong>を使う（重要性を意味する）<i>よりも<em>を使う（強調を意味する）
といったように、見た目だけでなく文書構造や意味を伝えるタグを用いるのがセマンティックHTMLの基本です。
👉 参考記事：HTMLの基本構文まとめ｜初心者向け徹底ガイド
<header> の使い方
<header> はページ全体やセクションの「冒頭部分（ヘッダー）」を表します。
よくある誤解は「ヘッダーは1ページに1つだけ」というものですが、実は 各セクションごとに置くことが可能 です。
例：
<header>
<h1>Web制作ブログ</h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">記事一覧</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>また、<article> 内や <section> 内に配置して、その部分専用のタイトルやナビゲーションを表すこともできます。
👉 関連記事：HTMLの基本構文まとめ
<main> の使い方
<main> は そのページの主要コンテンツ を示します。
重要なルールは：
- 1ページに1つだけ使う
- サイト共通のヘッダーやフッターは含めない
例：
<main>
<article>
<h2>セマンティックタグとは？</h2>
<p>意味を持ったタグを使うことで…</p>
</article>
</main>👉 関連記事：HTMLの基本構文まとめ
<section> の使い方
<section> は トピックごとのまとまり を表します。
「単純に見た目を分けたいだけなら <div>」
「意味のあるまとまりなら <section>」
と考えると使いやすいです。
例：
<main>
<section>
<h2>HTMLセマンティックタグの重要性</h2>
<p>SEOやアクセシビリティに大きく影響します。</p>
</section>
<section>
<h2>具体的なタグの使い方</h2>
<p>ここではheader, main, section, articleについて解説します。</p>
</section>
</main>👉 関連記事：SQLのWHERE句の使い方｜条件を指定してデータを絞り込む方法
<article> の使い方
<article> は 独立した1つのコンテンツ を表します。
例えば：
- ブログ記事
- ニュース記事
- レビュー記事
- フォーラムの投稿
といった「単体で完結する情報」に使います。
例：
<article>
<header>
<h2>HTMLセマンティックタグ入門</h2>
<p>公開日: 2025-09-26</p>
</header>
<p>この記事ではセマンティックタグの基本を解説します。</p>
</article>👉 関連記事：SQL SELECT文の使い方｜初心者向け解説
まとめ：セマンティックタグを正しく使おう
今回紹介したセマンティックタグのポイントを整理します。
<header>→ ページやセクションの冒頭部分<main>→ ページの主要コンテンツ（1ページ1つだけ）<section>→ 意味のあるコンテンツのまとまり<article>→ 独立して成り立つコンテンツ
セマンティックHTMLを正しく使うことで、検索エンジンにもユーザーにも「伝わるコード」になります。
👉 次に読むべき記事：