「divばかり並べたHTML、これで本当に合っているのかな」——そう感じた経験はありませんか。私も駆け出しの頃はまったく同じでした。sectionとarticleの違いが曖昧で、なんとなく見た目でタグを選んでいたんです。
この記事では、現役でPHP/Laravelを扱う私が、セマンティックHTMLの考え方とHTMLタグの使い分けを実務目線で解説します。コード例と表示結果をセットで示すので、読み終えたその日から手を動かせます。
Section 01SEOに強いHTMLとは？セマンティックHTMLが重要な理由
まずは土台から。「セマンティックHTML」とは何か、そしてなぜSEOやアクセシビリティで話題になるのかを整理します。ここが分かると、後半のタグ選びがぐっと楽になります。
セマンティックHTMLとは？
セマンティックHTMLとは、タグそのものが「意味」を持つ書き方です。semanticは「意味の」という英単語。たとえばheaderは「ページの上部」、navは「メニュー」と、名前を見ただけで役割が伝わります。逆にdivは中身を見ないと用途が分からない、意味を持たない箱です。HTMLそのものが初めてなら、HTMLとは？基礎知識と書き方を初心者向けに解説も合わせて読むと理解が速くなります。
HTML
<header>サイトのロゴやタイトル</header>
<nav>メニュー</nav>
<main>ページの主役となる本文</main>
<footer>著作権表示など</footer>HTMLに「意味」を持たせるメリット
意味を持たせる一番のメリットは、人にも機械にも構造が伝わることです。下の2つは、ブラウザ上の見た目はまったく同じにできます。しかし上のdiv版は「どこが本文でどこがメニューか」を検索エンジンやスクリーンリーダーが判断できません。下のセマンティック版は、タグを見ただけで役割が確定します。私がレビューで最初に見るのも、この差です。
HTML（意味を持たない書き方）
<div class="header">サイトタイトル</div>
<div class="nav">メニュー</div>
<div class="main">本文</div>
<div class="footer">著作権表示</div>HTML（セマンティックな書き方）
<header>サイトタイトル</header>
<nav>メニュー</nav>
<main>本文</main>
<footer>著作権表示</footer>SEOとアクセシビリティに強い理由
検索エンジンはページを読むとき、タグから構造を推測します。navやmainがあれば「ここがメニュー、ここが本文」と理解しやすくなります。アクセシビリティ面でも効果は大きいです。目の見えない方が使うスクリーンリーダーは、これらのタグを目印にページ内を移動します。私が担当した案件でも、divをmainやnavに置き換えただけで、読み上げの「見出しジャンプ」がきれいに機能するようになりました。構造が正しいHTMLは、機械にも人にもやさしいのです。
セマンティックHTMLだけでSEOは上がる？
ここは正直にお伝えします。セマンティックHTMLに変えただけで順位が跳ね上がることはありません。Googleは、コンテンツの質や関連性を最重視しています。とはいえ無意味でもありません。構造が正しいとクローラーが内容を理解しやすくなり、アクセシビリティも上がる。この積み重ねが間接的にSEOを支えます。「魔法の裏技」ではなく「土台を整える作業」と捉えるのが正確です。まずは自分のHTMLを開き、divが並んでいないか眺めるところから始めましょう。
Section 02SEOに強いHTMLを書くための基本タグの使い分け
次はページ全体の骨組みを作るタグです。header・main・nav・footerの4つを押さえれば、ページの「大枠」はセマンティックに書けます。役割はどれもシンプルなので、コードと一緒に見ていきましょう。
headerタグの役割
headerは、そのまとまりの「導入部分」を表します。ページ上部のロゴやサイトタイトル、記事のタイトルまわりに使います。ページに1つだけ、という制限はありません。記事ごと・セクションごとに置いてもかまいません。
HTML
<header>
<h1>Labiteブログ</h1>
<p>エンジニアの学習を助けるメディア</p>
</header>mainタグはページで1つだけ
mainは、そのページの「主役」となる本文を囲みます。ここが最重要ルールです。画面に表示されるmainは、1ページに1つだけと決められています。ヘッダーやサイドバーなど、どのページにも共通で出る部分はmainに入れません。「このページ固有の中身」だけをmainで囲むイメージです。
HTML
<main>
<h1>記事タイトル</h1>
<p>ここにページ固有の本文が入ります。</p>
</main>navタグを使う基準
navは「主要なナビゲーション」に使います。目安はサイトの回遊に関わる大きなメニューかどうか。グローバルメニューやパンくずリストが代表例です。逆に、本文中のちょっとしたリンク1〜2本までnavで囲む必要はありません。「案内板として重要か」で判断すると迷いません。
HTML
<nav>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/blog">ブログ</a></li>
</ul>
</nav>footerタグの役割
footerは、そのまとまりの「締め」の情報を表します。著作権表示、運営者情報、SNSリンクなどが入ります。headerと同じく、ページに1つとは限りません。記事の末尾に置く小さなfooterもありです。
HTML
<footer>
<p>Copyright 2026 Labite</p>
</footer>図解｜セマンティックHTMLの基本構造
4つを組み合わせると、ページの骨組みはこうなります。header・nav・main・aside・footerが縦横に並ぶイメージです。この形をテンプレートとして覚えておくと、新しいページを作るたびに「まず骨組み」から書けるようになります。
HTML
<body>
<header>
<h1>サイト名</h1>
<nav>グローバルメニュー</nav>
</header>
<main>
<article>記事の本体</article>
</main>
<aside>関連リンクや広告</aside>
<footer>運営者情報・著作権</footer>
</body>今日の一歩：自分のページの一番外側を、この骨組みに置き換えてみましょう。それだけで構造がぐっと整理されます。
プログラミングとは？未経験からWebエンジニアを目指す始め方セマンティックHTMLで重要なHTMLタグの使い分け
ここが本記事の核心、section・article・divの使い分けです。検索でも「section article 違い」「div section どっち」と最も迷われる部分。フローチャートと比較表で、判断に迷わない状態を目指します。
迷ったらこれ！タグ選びフローチャート
私が新人に教えるときは、いつもこの順番で質問します。上から順にYES/NOで答えれば、使うべきタグが1つに決まります。
- そのまとまりは、切り出しても単体で意味が通じる？ → YESなら article
- NOなら、見出しを付けられる「意味のまとまり」？ → YESなら section
- NOなら、本筋から外れた「補足」？ → YESなら aside
- どれも違い、見た目の調整だけが目的？ → div
sectionタグの使い方
sectionは「意味のあるまとまり」を表します。目安は見出し（h2など）を付けられるか。章や項目の区切りに使います。ただし単体では完結せず、そのページの一部として存在するのがsectionです。原則、中に見出しを1つ持たせます。
HTML
<section>
<h2>料金プラン</h2>
<p>3つのプランをご用意しています。</p>
</section>articleタグの使い方
articleは「それ単体で独立して成り立つ内容」に使います。ブログ記事、ニュース、ユーザーのコメント、商品カードが代表例です。判断基準は切り出してRSSやSNSに流しても意味が通じるか。通じるならarticleが正解です。
HTML
<article>
<h2>セマンティックHTML入門</h2>
<p>この記事だけで内容が完結します。</p>
</article>asideタグの使い方
asideは「本筋から少し外れた補足」に使います。サイドバー、広告、関連リンク、豆知識の囲みなどです。なくても本文は成立するけれど、あると便利——そんな位置づけの内容に向いています。
HTML
<aside>
<h2>関連記事</h2>
<ul>
<li><a href="/css">CSSとは？</a></li>
</ul>
</aside>divタグとの違い
divは意味を持たない箱です。使うべき場面は、意味を持つタグが1つも当てはまらず、レイアウトやスタイル調整だけが目的のとき。CSSで横並びにしたい、まとめて余白を付けたい、といった用途です。divが悪いわけではありません。「意味のあるタグで表せない箱」として、最後に使うのが正しい距離感です。
HTML
<div class="card">
<p>スタイルを当てるための箱</p>
</div>section・article・div比較表
4つの違いを一覧にしました。迷ったらこの表に戻ってきてください。
| タグ | 意味・役割 | 見出し | 主な用途 | 単体で完結 |
|---|---|---|---|---|
| section | 意味のあるまとまり | 原則あり | 章・トピックの区切り | しない |
| article | 独立して成立する内容 | あり | 記事・コメント・商品カード | する |
| aside | 本筋から外れた補足 | あってもよい | サイドバー・広告・関連リンク | 補足的 |
| div | 意味を持たない箱 | 不要 | レイアウト・スタイル調整 | なし |
今日の一歩：直近に書いたdivを1つ選び、「これはarticle？section？aside？」と自問してみましょう。当てはまれば置き換えのチャンスです。
Section 04SEOに強いHTMLを書くために知っておきたい見出しタグのルール
タグの骨組みと並んで大切なのが見出しです。h1〜h6の使い方は、検索エンジンにもスクリーンリーダーにも直結します。ここでは階層の考え方と、よくある疑問に答えます。
見出しタグ（h1〜h6）の役割
見出しタグは、文章の「目次」の役割を持ちます。h1が最上位で、h2、h3と数字が大きくなるほど下位になります。読者はもちろん、検索エンジンもこの階層でページの論理構造を読み取ります。文字を大きくしたいからh1、ではありません。大きさはCSSの仕事、階層は見出しタグの仕事です。
HTML
<h1>記事タイトル（ページに1つ）</h1>
<h2>大見出し</h2>
<h3>中見出し</h3>h1タグは複数あっても問題ない？
結論は「使えるが、1つを推奨」です。Googleは以前から「1ページに複数のh1があっても問題ない」と説明しており、検索アドボケイトのジョン・ミュラー氏も、複数h1でSEO上のペナルティはないと繰り返し述べています。一方で多くのSEO・アクセシビリティの専門家は、今も「h1はページに1つ」を勧めます。h1はそのページの主題を伝える最も強い信号だからです。複数にすると主題がぼやけ、スクリーンリーダー利用者も迷いやすくなります。迷うなら1ページ1つのh1が安全策です。
見出し階層を守る理由
階層で大事なのはレベルを飛ばさないこと。h2の次にいきなりh4へ飛ぶと、目次に抜けが生じ、機械が構造を誤解します。h2の下はh3、その下はh4、と1段ずつ下げます。
HTML
<!-- 悪い例：h2の次にh4へ飛んでいる -->
<h2>大見出し</h2>
<h4>いきなり小見出し</h4>
<!-- 良い例：1段ずつ下げる -->
<h2>大見出し</h2>
<h3>中見出し</h3>SEOに強い見出し構成の考え方
強い見出し構成のコツは、見出しだけ読んでも内容の流れが分かる状態にすることです。読者が拾い読みできる目次は、検索エンジンにとっても分かりやすい構造。キーワードを不自然に詰め込むより、「この章で何を解決するか」を素直に書くほうが結果的に伝わります。まずは今書いている記事の見出しを、上から順に読み返してみましょう。流れが通れば合格です。
Section 05SEOに弱くなるHTMLのNG例
ここからは、初心者がやりがちなNGと直し方です。どれも私自身が通ってきた道なので、耳が痛い方も安心してください。1つずつ直せば必ず良くなります。
divばかり使ってしまう
最も多いのが、何でもdivで囲む「div地獄」です。見た目は作れますが、意味はゼロ。検索エンジンもスクリーンリーダーも構造をつかめません。対策はシンプルで、divを書く前に「意味のあるタグはないか」を一度考えるだけ。header、nav、main、article、sectionのどれかに当てはまらないか確認する習慣をつけましょう。
見出しがないsectionを書く
sectionは原則、見出しを1つ持ちます。見出しのないsectionは「何のまとまりか分からない箱」になり、divと変わりません。見出しを付けられないなら、それはsectionではなくdivが適切、というサインです。
HTML
<!-- 悪い例：見出しのないsection -->
<section>
<p>何のまとまりか分からない</p>
</section>見た目だけでタグを選ぶ
「文字を大きくしたいからh1」「枠線を付けたいからsection」——見た目でタグを選ぶのはNGです。役割は3つに分かれます。構造はHTML、見た目はCSS、動きはJavaScript。この分担を意識すれば、タグ選びで見た目を気にする必要はなくなります。詳しくはCSSとは？書き方とHTMLへの適用を初心者向けに解説やJavaScriptとは？できること・違いを初心者に解説もどうぞ。
見出しタグの階層が飛んでいる
前章でも触れましたが、階層飛ばしは頻出のNGです。h1の次がh3、h2の次がh5、といった形。見た目のサイズ感で選ぶと起きがちです。直し方は、サイズはCSSで調整し、タグは階層どおりに戻すこと。これで構造とデザインを両立できます。
Before／Afterコードで改善例を紹介
最後に、divだらけのコードをセマンティックHTMLへ直す例です。見た目は同じまま、意味だけを足していきます。実務のリファクタリングも、まさにこの流れで進めます。
HTML（Before：divのみ）
HTML（Before：divのみ）
<div class="top">
<div class="title">Labiteブログ</div>
<div class="menu">メニュー</div>
</div>
<div class="content">
<div class="post">
<div class="ttl">記事タイトル</div>
<div class="txt">本文</div>
</div>
</div>
<div class="bottom">著作権</div>HTML（After：セマンティック）
HTML（After：セマンティック）
<header>
<h1>Labiteブログ</h1>
<nav>メニュー</nav>
</header>
<main>
<article>
<h2>記事タイトル</h2>
<p>本文</p>
</article>
</main>
<footer>著作権</footer>今日の一歩：自分のコードから「div地獄」を1ブロック選び、上のBefore/Afterを真似て置き換えてみましょう。
Section 06今日から実践できるSEOに強いHTMLのチェックリスト
学んだ内容を、実務で使えるチェックリストにまとめました。書く前・レビュー時・仕上げの3場面で使えます。ブックマークして、コーディングのたびに見返してください。
HTMLを書く前の確認項目
書き始める前に、次の点を確認するとdiv地獄を防げます。
- ページの骨組みは header / main / footer で表せているか
- mainは1ページに1つになっているか
- まとまりごとに、意味のあるタグ（article・section）を割り当てられるか
- 見出し（h1〜h6）で目次の流れを作れているか
コードレビューで確認されるポイント
実務では、こうした点がコードレビューでチェックされます。エンジニアの仕事内容をもっと知りたい方はWebエンジニアとは？仕事内容や必要スキルを未経験向けに解説も参考になります。
- divで代用しているが、本当はarticleやsectionが適切な箇所はないか
- 見出しの階層が飛んでいないか
- 見出しのないsectionが残っていないか
- navやmainなど、意味のあるタグが正しく使われているか
HTMLバリデーションツールを活用しよう
目視だけに頼らず、ツールで機械的にチェックすると精度が上がります。私も納品前には必ず通します。
- W3C Markup Validation Service：HTMLの文法ミスを検出してくれる公式ツール
- Lighthouse：Chromeに標準搭載。パフォーマンスやアクセシビリティを採点
- axe DevTools：アクセシビリティの問題を細かく指摘するブラウザ拡張
今日の一歩：いま開いているページを、まずW3C Validatorに通してみましょう。1つエラーを直すだけでも前進です。
Section 07よくある質問（FAQ）
検索で再質問されやすい疑問を、短くまとめて解決します。
sectionとarticleはどう使い分けますか？
切り出して単体で意味が通じるならarticle、そのページの一部としての区切りならsectionです。ブログ記事1本はarticle、その中の「料金」「特徴」といった章はsection、と考えると分かりやすいです。
divタグを使いすぎるとSEOに悪影響がありますか？
divが直接ペナルティになることはありません。ただしdivだらけだと構造が伝わりにくく、クローラーやスクリーンリーダーの理解を助けられません。意味のあるタグで表せる箇所はそちらを優先するのが得策です。
h1タグは複数使っても問題ありませんか？
Googleは複数h1でも問題ないとしています。ただし主題を明確にする観点から、1ページ1つのh1が推奨されます。迷うなら1つに絞りましょう。
セマンティックHTMLを書けば検索順位は上がりますか？
それだけで上がるわけではありません。順位はコンテンツの質や関連性が中心です。セマンティックHTMLは、構造の理解とアクセシビリティを支える「土台」として、間接的に効いてきます。
見た目だけを変更したい場合はどのタグを使うべきですか？
見た目の調整はCSSの担当です。意味のあるタグが当てはまらず、スタイルのためだけに箱が必要なときはdivを使います。タグで見た目を作ろうとしないのがコツです。
Section 08まとめ
最後に要点を振り返ります。セマンティックHTMLは、難しい暗記ではなく「意味で選ぶ」という考え方が9割です。今日から意識できるポイントに絞りました。
まず覚えたいセマンティックタグ7選
迷ったら、まずこの7つから使い始めれば十分です。
- header：導入・上部（ロゴやタイトル）
- nav：主要なメニュー
- main：ページの主役（1ページに1つ）
- article：単体で完結する内容
- section：見出しを持つ意味のまとまり
- aside：本筋から外れた補足
- footer：締めの情報（著作権など）
迷ったら「見た目」ではなく「意味」で選ぼう
タグ選びで迷ったら、思い出してほしい合言葉は1つ。「見た目」ではなく「意味」で選ぶです。大きさや色はCSSに任せ、HTMLは中身の役割を表すことに集中する。これだけで、あなたのコードはSEOにもアクセシビリティにも強くなります。次のステップとして学習全体の道筋を確認したい方は、未経験からWebエンジニアを目指すロードマップも覗いてみてください。まずは今日書いたHTMLを1か所、意味のあるタグに置き換えることから始めましょう。
