HTML を書いていると、つい何でも <div> で囲んでしまいがちです。けれども HTML5 には、<header> や <nav>、<main>、<article> のように「その部分が何であるか」を表すセマンティックタグ（意味を持つ要素）が用意されています。この記事では、なぜ <div> ばかりでなくセマンティックタグを使うのかという理由から、主要なタグの役割と使いどころ、1ページ全体の骨組みを組む実践例までを、初心者の方にも分かるように解説します。混同しやすい <section> と <article> の使い分けにも触れるので、「どのタグを使えばいいの？」という迷いがすっきりするはずです。
目次
セマンティックタグとは何か
セマンティック（semantic）とは「意味の」という意味の言葉です。セマンティックタグとは、<div> や <span> のように中身が何でもありの「ただの箱」ではなく、その要素が文書の中でどんな役割を担っているかを名前自体が表しているタグのことを指します。たとえば <nav> は「ナビゲーション（案内リンクのまとまり）」、<footer> は「フッター（ページや記事の末尾情報）」というように、タグ名を見ればそのブロックの目的が分かります。
<header></header> と書くか <div class="header"></div> と書くかで、ブラウザ上の見た目はまったく同じです。それでもセマンティックタグを使うのは、人にもプログラムにも「ここはヘッダーですよ」という意味が正しく伝わるからです。順番に、その具体的なメリットを見ていきましょう。
なぜ div ばかりでなくセマンティックタグを使うのか
すべてを <div> で組んでも、CSS でクラスを付ければ見た目は同じように作れます。それでもセマンティックタグが推奨されるのは、見た目以外のところで多くの利点があるからです。
まずコードの可読性が上がります。<div class="wrapper"> が何重にも入れ子になったコードは、どこからどこまでが何のブロックなのか追いづらいものです。<header> や <main>、<footer> が使われていれば、ソースをざっと眺めるだけでページの構造が頭に入ります。これは自分が後で読み返すときにも、チームで開発するときにも効いてきます。
次にアクセシビリティとスクリーンリーダーへの対応です。目の見えない方が使う読み上げソフト（スクリーンリーダー）は、<nav> や <main> といったタグを手がかりに「ナビゲーションへ移動」「本文へジャンプ」といった操作を提供します。<div> だけで作られたページにはこうした目印がないため、利用者はページの構造をつかみにくくなります。意味のあるタグを使うだけで、特別な記述をしなくても操作性が向上するのです。
さらにSEO（検索エンジン最適化）の面でも有利に働きます。検索エンジンのクローラーは、ページのどこが主要な本文（<main> や <article>）で、どこが補足情報（<aside>）なのかを構造から読み取ろうとします。文書の構造が明確であるほど、内容を正しく解釈してもらいやすくなります。可読性・アクセシビリティ・SEO のいずれもタグを置き換えるだけで底上げできるのですから、使わない手はありません。
主なセマンティックタグと役割
文書構造を作るときによく使う代表的なセマンティックタグを一覧にまとめました。それぞれ「どんな部分に使うか」をイメージしながら眺めてみてください。
| タグ | 役割・使いどころ |
|---|---|
<header> | ページや記事の冒頭部分。サイトロゴ・タイトル・導入のナビゲーションなどを入れる。 |
<nav> | 主要なナビゲーション（案内リンクのまとまり）。グローバルメニューやパンくずなど。 |
<main> | そのページの主要な内容。1ページに1つだけ使う。 |
<section> | 意味的なまとまりを持つ区切り。原則として見出し（h1〜）を伴う。 |
<article> | それ単体で完結し、独立して再利用・配信できるコンテンツ（記事・投稿など）。 |
<aside> | 本文と直接は関係しない補足情報。サイドバー・関連リンク・広告など。 |
<footer> | ページや記事の末尾部分。著作権表示・関連リンク・著者情報など。 |
<figure> / <figcaption> | 図版・画像・コードなどの引用とそのキャプション（説明文）をまとめる。 |
<time> | 日付や時刻を表す。datetime 属性で機械可読な形式も併記できる。 |
<header>・<footer>・<nav>・<aside> はページ全体だけでなく、<article> の中でも使えます。たとえば記事ごとに「タイトル＋投稿日」を表すヘッダーや、末尾の著者情報を表すフッターを置く、といった使い方ができます。
1ページの骨組みを組んでみる
実際に、ブログの1ページを想定した骨組みをセマンティックタグだけで組んでみましょう。<header> の中にサイトタイトルと <nav> を置き、本文全体を <main> でくくります。<main> の中には記事本体を表す <article> と、補足情報のサイドバーを表す <aside> を並べ、最後にページ末尾の <footer> を置きます。
<body>
<!-- ページ上部：ロゴ・サイト名とグローバルメニュー -->
<header>
<h1>webool ブログ</h1>
<nav>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/about">このサイトについて</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</nav>
</header>
<!-- ページの主要な内容（1 ページに 1 つ） -->
<main>
<!-- それ単体で完結する記事本体 -->
<article>
<header>
<h2>セマンティックタグの使い方</h2>
<p>公開日：<time datetime="2026-06-05">2026年6月5日</time></p>
</header>
<!-- 記事内の意味的なまとまり（見出しを伴う） -->
<section>
<h3>はじめに</h3>
<p>セマンティックタグの概要を説明します。</p>
</section>
<section>
<h3>具体的な使い方</h3>
<p>各タグの役割を順番に見ていきます。</p>
</section>
<footer>
<p>執筆者：webool 編集部</p>
</footer>
</article>
<!-- 本文と直接関係しない補足情報 -->
<aside>
<h2>関連記事</h2>
<ul>
<li><a href="/css-grid">CSS Grid 入門</a></li>
<li><a href="/flexbox">Flexbox の基本</a></li>
</ul>
</aside>
</main>
<!-- ページ末尾：著作権表示など -->
<footer>
<p>© 2026 webool</p>
</footer>
</body>クラス名に頼らなくても、タグ名だけでページの全体像が伝わるのが分かるでしょうか。<header> と <footer> がページ全体にも <article> の中にも登場している点に注目してください。これらは「どこの先頭・末尾なのか」が文脈で決まるため、入れ子の場所に応じて意味が切り替わります。
main は1ページに1つ、見出しとの関係
<main> は、そのページでもっとも中心となるコンテンツを表すタグです。重要なルールとして、表示される <main> は1ページに1つだけと定められています。ヘッダーやフッター、サイドバーのように複数ページで共通して使い回される部分は <main> の外に置き、そのページ固有の本文だけを <main> で囲むのが基本です。
見出しタグ（<h1>〜<h6>）との関係も押さえておきましょう。<h1> はそのページの最上位の見出しで、ページに1つが基本です。<section> や <article> でまとまりを区切ったら、その先頭に <h2> や <h3> といった見出しを置きます。セマンティックタグはあくまで「区画（ブロック）」を表すもので、その区画が何についての話なのかは見出しで示す、という役割分担です。区画と見出しをセットで使うことで、文書の階層構造がはっきりします。
section と article を混同しやすい点
セマンティックタグの中でも、<section> と <article> はとくに迷いやすい組み合わせです。どちらも「中身をまとめる区画」という点で似ているため、なんとなくで選んでしまいがちです。判断の基準を整理しておきましょう。
article は「単体で完結し、再利用できる」かどうか
<article> は、その部分だけを切り出して別の場所に置いても意味が通る、独立したコンテンツに使います。ブログの1記事、ニュース記事、商品レビュー、SNS の1投稿などが典型です。「これ単体で RSS フィードに流したり、他のページに転載したりできるか？」と考えてみて、できそうなら <article> が適しています。
section は「文書の中の意味的な章・節」
一方 <section> は、ある文書やコンテンツの中のテーマごとの区切り（章・節）に使います。それ単体では完結せず、前後の文脈があって初めて意味を持つまとまりです。原則として見出しを伴うのが特徴で、見出しを付けられないような単なるレイアウト目的の囲みには使いません。「ここは見出しを付けて区切りたい意味のまとまりだが、独立した記事ではない」という場合に <section> を選びます。
両者は入れ子にもできます。先ほどの骨組みのように、1つの記事（<article>）の中を複数の章（<section>）に分けるのは自然な使い方です。逆に、トップページで「新着記事一覧」という1つの <section> の中に、複数の <article>（各記事のカード）を並べる、という構成もよくあります。迷ったら「独立して成立するなら article、文書内の区切りなら section」と覚えておくとよいでしょう。
div を使ってよい場面
ここまで読むと「<div> はもう使ってはいけないの？」と思うかもしれませんが、そうではありません。<div> には「特に意味を持たない、純粋にレイアウトやスタイリングのための入れ物」という役割があります。たとえば Flexbox や Grid を効かせるためにいくつかの要素をまとめて囲みたいだけ、というように、意味的な区切りではなく単なるグルーピングが目的なら <div> が正解です。
使い分けの考え方はシンプルです。そのまとまりに意味があるなら、対応するセマンティックタグを選ぶ。意味はなく、CSS のために囲みたいだけなら <div> を使う。無理にすべてをセマンティックタグに置き換える必要はなく、適切な要素が存在しないときに <div>（や <span>）でつなぐ、というバランスが現実的です。
セマンティックタグは見た目を変えない
最後に、初心者の方が誤解しやすい大事な点を補足します。セマンティックタグはあくまで「意味」を与えるだけで、見た目（デザイン）は変えません。<div> を <header> や <article> に書き換えても、ブラウザ上の表示は基本的に変化しないのです（<header> や <section> などはブロックレベル要素として縦に積まれる、という程度の差はあります）。
色を付ける、余白を空ける、横並びにするといった装飾はすべて CSS の役割です。HTML で文書の構造と意味を組み立て、CSS でその見た目を整える、という分担を意識すると、メンテナンスしやすいコードになります。「タグを変えても見た目が変わらない＝失敗」ではなく、それがセマンティックタグの正しい振る舞いだと理解しておきましょう。
まとめ
セマンティックタグは、<div> のような意味を持たない箱の代わりに、<header>・<nav>・<main>・<section>・<article>・<aside>・<footer> など、役割が名前に表れた要素で文書構造を組み立てる仕組みです。使うだけでコードの可読性が上がり、スクリーンリーダーによるアクセシビリティや SEO にもプラスに働きます。<main> は1ページに1つ、区画には見出しをセットで添えるのが基本で、「独立して完結するなら <article>、文書内の意味的な区切りなら <section>」という使い分けを覚えておきましょう。意味のないグルーピングには <div> を使ってかまいません。セマンティックタグは見た目を変えず、装飾は CSS が担う——この役割分担を意識して、まずは今あるページの <div> を適切なタグに置き換えるところから始めてみてください。