「とりあえずdivで囲んでおけば表示される」「見た目は同じだから問題ないでしょ？」──HTMLの学習を始めたばかりの頃、こう考えるのはごく自然なことです。

実際、<div>だけで組んでもブラウザは問題なくページを表示してくれます。しかし、見た目が同じでも”裏側”では大きな差が生まれています。検索エンジンがページの内容を正しく理解できない、スクリーンリーダーで情報にたどり着けない、半年後の自分がコードを読めない──こうした「実害」は、HTMLの構造が悪いことが原因で起きています。

この記事では、「自分のHTMLは本当にこのままでいいのか？」と漠然とした不安を感じている方に向けて、構造が悪い場合の具体的なデメリットと、今日から始められる改善ポイントを整理します。

「見た目が同じならHTMLの構造はどうでもいい」は本当か？

まず、多くの独学者が抱く疑問に正面からお答えします。結論は「いいえ、見た目が同じでも構造は重要です」。

HTMLは本来、文書の「意味」と「構造」をマシン（ブラウザ、検索エンジン、スクリーンリーダーなど）に伝えるための言語です。ブラウザはある程度「お行儀の悪いHTML」でも表示してくれますが、それは人間に見える画面上の話。裏側では「このページの主題は何か」「ここはナビゲーションか、本文か、補足情報か」といった構造情報が欠落した状態になっています。

たとえば、同じ見た目のページでも次のような差があります。

<!-- divだけで組んだ構造 -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="main">
  <div class="article">...</div>
</div>
<div class="sidebar">...</div>
<div class="footer">...</div>

<!-- セマンティックHTMLで組んだ構造 -->
<header>...</header>
<nav>...</nav>
<main>
  <article>...</article>
</main>
<aside>...</aside>
<footer>...</footer>

ブラウザ上の表示はほぼ同じです。しかし後者は、検索エンジンやスクリーンリーダーに「ここがヘッダー」「ここがメインコンテンツ」「ここが補足情報」と伝えられます。前者のdiv構造では、class名を手がかりに推測するしかなく、その推測は保証されません。

ここから先では、構造が悪い場合に具体的に何が壊れるのかを、SEO・アクセシビリティ・保守性の3つの観点で掘り下げていきます。

HTMLの「構造が悪い」とは具体的にどういう状態か？

「構造が悪い」と一口に言っても、いくつかの典型的なパターンがあります。自分のコードに心当たりがないか、まずは5つのパターンを確認してみてください。

どれか1つでも当てはまっていれば、この先の「実害」セクションが自分ごととして読めるはずです。特に独学の方は①と②を同時にやっているケースが多いので、意識して確認してみてください。

実害①：検索エンジンがページの内容を正しく理解できない

Googleをはじめとする検索エンジンは、HTMLの構造情報を手がかりにページの内容を解釈しています。見出しタグ（h1〜h6）からはトピックの階層を、<nav>からはナビゲーション領域を、<main>からはメインコンテンツの範囲を読み取ります。

構造が悪いHTMLでは、この「手がかり」が極端に少なくなります。具体的には次のような影響が考えられます。

見出し階層が崩れていると「ページの主題」がぼやける

検索エンジンはh1を「ページ全体の主題」、h2を「章レベルのトピック」として扱います。h1が複数あったり、h2→h4のように階層が飛んでいると、「結局このページは何について書かれているのか」が伝わりにくくなります。

Google検索セントラルでも、見出しを使ってページの構造を伝えることが推奨されています。見出しの論理構造が崩れたページは、この恩恵を十分に受けられません。

divだけの構造では「どこがメインコンテンツか」が不明瞭になる

検索エンジンがページをクロールする際、<main>タグがあれば「ここがこのページの中心的なコンテンツだ」と明確に伝わります。一方、すべてがdivだとclass名から推測するしかなく、ヘッダーやサイドバーのテキストとメインコンテンツの区別があいまいになり得ます。

SEOは「魔法のように順位が上がる施策」ではありませんが、「正しく伝えるための土台」としてHTMLの構造は確実に効いています。構造を整えることは、検索エンジンに「このページの情報を正しく理解してもらう」ための最低限の礼儀と言えるでしょう。

実害②：スクリーンリーダーで”読めないページ”になる

HTMLの構造が悪いことの実害で、見落とされがちなのがアクセシビリティへの影響です。視覚に障害のある方はスクリーンリーダー（VoiceOver、NVDAなど）を使ってWebページを閲覧しますが、このときHTMLの構造情報がナビゲーションの生命線になります。

ランドマークナビゲーションが機能しない

スクリーンリーダーには「ランドマーク」と呼ばれる領域（ヘッダー、ナビ、メイン、フッターなど）にジャンプする機能があります。<header>、<nav>、<main>、<footer>などのセマンティックタグは、自動的にランドマークロールを持ちます。

しかし、すべてがdivで構成されたページでは、ランドマークが1つも認識されません。スクリーンリーダーで「メインコンテンツへジャンプ」を実行しても何も起こらず、ページの先頭から1行ずつ読み上げるしかなくなります。

見出しジャンプが使えない

スクリーンリーダー利用者の多くは、まず見出し一覧を表示してページの全体像を把握します。見出しタグが正しく使われていれば、「h1：ページタイトル → h2：セクション1 → h3：詳細…」と目次のように構造を把握できます。

ところが見出しレベルが飛んでいたり、見出しの代わりにdivとCSSで「見た目だけ大きい文字」を作っていたりすると、この見出しジャンプが壊れます。

スクリーンリーダーでの読み上げの違いを体感してみよう

実際に構造が悪いHTMLと良いHTMLで、スクリーンリーダーの読み上げがどう変わるかイメージしてみましょう。

この差は、晴眼者がページを「スクロールして流し読みする」のと同じくらい重要な操作性の違いです。構造が悪いHTMLは、スクリーンリーダー利用者にとって「目次も索引もない本」を渡しているようなものです。

注意：日本でも2024年4月に改正された障害者差別解消法により、民間事業者にもWebアクセシビリティへの合理的配慮の提供が義務化されました。「個人の学習サイトだから関係ない」とは言い切れない時代になっています。

実害③：コードの保守性が崩壊する

SEOやアクセシビリティは「外部への影響」ですが、構造の悪さは自分自身やチームメンバーの開発効率にも直接響きます。

「div地獄」は半年後の自分が読めない

divだけで組んだページは、class名だけが構造を説明する手がかりになります。しかし、class名の命名ルールが統一されていなかったり、そもそも.boxや.wrapのような抽象的な名前だったりすると、どのdivがどの役割を果たしているのかHTMLを見ただけでは分かりません。

セマンティックタグを使っていれば、<header>はヘッダー、<nav>はナビゲーション、<aside>はサイドバーと、タグを見た瞬間に役割が分かります。これは、チーム制作で他の人がコードを引き継ぐときにも大きな差になります。

CSSの修正で「どこに影響するか分からない」問題

divにclass名を付けてスタイルを当てている場合、同名のclassが別の場所でも使い回されていないか確認が必要です。セマンティックタグを適切に使い、header .logoやmain .section-titleのようにセレクタを組めば、スタイルの影響範囲が構造的に限定され、CSSの変更リスクを下げられます。

コードレビューで指摘される「構造の意図が読めない」問題

制作会社やチームでの実務、あるいはポートフォリオの評価において、「なぜこの要素をdivにしたのか」「このセクションの区切りの意図は何か」が説明できないコードはマイナス評価になりがちです。セマンティックHTMLを使えていることは、コーダーとしての基礎力の証明にもなります。

よくあるNG構造 → 改善コード Before/After

ここからは、実際にありがちなNG構造を4パターン取り上げ、改善後のコードとセットで紹介します。コードはなるべく最小限にして、ポイントが分かりやすいようにしています。

パターン1：ページ全体がdivだけで構成されている

Before（NG）

<div class="header">
  <div class="logo">サイト名</div>
  <div class="nav">
    <div class="nav-item">ホーム</div>
    <div class="nav-item">サービス</div>
  </div>
</div>
<div class="main">
  <div class="title">記事タイトル</div>
  <div class="content">本文...</div>
</div>

After（改善）

<header>
  <p class="logo">サイト名</p>
  <nav>
    <ul>
      <li><a href="/">ホーム</a></li>
      <li><a href="/service/">サービス</a></li>
    </ul>
  </nav>
</header>
<main>
  <h1>記事タイトル</h1>
  <p>本文...</p>
</main>

改善ポイント：<header>、<nav>、<main>を使うことでランドマークが生成されます。ナビゲーションのリンクは<ul>+<li>+<a>の構造にすることで、スクリーンリーダーが「3項目のリスト」と認識してくれます。記事タイトルは<h1>にすることで、ページの主題が明確になります。

パターン2：sectionを見出しなしで使っている

Before（NG）

<section>
  <p>会社概要のテキスト...</p>
</section>
<section>
  <p>サービス紹介のテキスト...</p>
</section>

After（改善）

<section>
  <h2>会社概要</h2>
  <p>会社概要のテキスト...</p>
</section>
<section>
  <h2>サービス紹介</h2>
  <p>サービス紹介のテキスト...</p>
</section>

改善ポイント：<section>は「テーマ的にまとまったセクション」を表す要素で、原則として見出し（h2など）とセットで使います。見出しのないsectionはHTMLの仕様上「見出しのない章」のような状態になり、構造が曖昧になります。もし見出しが不要な単なるラッピングなら、divで十分です。

パターン3：見出しレベルを見た目の都合で飛ばしている

Before（NG）

<h1>サービス紹介</h1>
<h2>特徴</h2>
<h4>初心者でも安心</h4> <!-- h3を飛ばしている -->
<h4>24時間サポート</h4>
<h2>料金プラン</h2>

After（改善）

<h1>サービス紹介</h1>
<h2>特徴</h2>
<h3>初心者でも安心</h3>
<h3>24時間サポート</h3>
<h2>料金プラン</h2>

/* 文字サイズを小さくしたいだけならCSSで対応 */
h3 {
  font-size: 1.05rem;
  font-weight: 600;
}

改善ポイント：見出しレベルは論理的な階層を表すものであり、文字の大きさを決めるものではありません。「小さく見せたいからh4にする」のではなく、h3にして見た目はCSSで調整しましょう。W3C WAIでも、見出しランクのスキップは混乱を招くため避けるべきとされています。見出しタグの使い方をさらに詳しく知りたい方は「見出しタグ（h1・h2・h3）の正しい使い方とSEO効果」もあわせてご覧ください。

パターン4：入れ子構造のルール違反

Before（NG）

<p>
  ここに説明テキスト
  <div class="box">
    補足情報...
  </div>
</p>

After（改善）

<p>ここに説明テキスト</p>
<div class="box">
  <p>補足情報...</p>
</div>

改善ポイント：HTMLの仕様上、<p>の中に<div>を入れることはできません。ブラウザはこのコードに遭遇すると、自動的にpを閉じてdivを外に出す「エラー補正」を行います。その結果、意図しないDOM構造が生まれ、CSSが効かない・レイアウトが崩れるなどの問題が起こります。<p>の中にはインライン要素（<span>、<a>、<strong>など）のみを入れるようにしましょう。

自分のHTMLをセルフチェックする方法

「自分のHTMLは大丈夫だろうか？」と思ったら、次の3ステップで確認できます。特別なスキルは不要で、今日からすぐに始められます。

ステップ1：W3C Markup Validation Serviceで検証する

W3C Markup Validation ServiceにURLを入力するか、HTMLコードを直接貼り付けると、文法エラーや入れ子違反を一括でチェックしてくれます。エラーが出たら1つずつ修正していくだけで、構造の基本品質が上がります。

ステップ2：ブラウザ拡張で構造を可視化する

Chrome拡張の「HeadingsMap」を使うと、ページ上の見出し階層をツリー構造で確認できます。見出しレベルが飛んでいたり、h1が複数あったりすると一目瞭然です。「WAVE Evaluation Tool」もおすすめで、アクセシビリティ上の問題点を視覚的にハイライトしてくれます。

ステップ3：スクリーンリーダーで実際に体験する

WindowsならナレーターまたはNVDA（無料）、MacならVoiceOver（標準搭載）で、自分のページを読み上げてみましょう。ランドマークや見出しへのジャンプ操作を試して、スムーズに情報にたどり着けるか確認します。最初は操作に戸惑いますが、一度体験すると「なぜセマンティックHTMLが必要なのか」が実感として腑に落ちるはずです。

よくある質問

divを一切使わないのが正解ですか？

いいえ、divには「意味を持たない汎用コンテナ」としての正当な役割があります。レイアウト調整やスタイリングのためのラッパーにはdivが最適です。問題は「意味のある要素をdivで代用してしまうこと」であり、divを使うこと自体が悪いわけではありません。セマンティックタグで代替できる場合はそちらを優先し、純粋に装飾・レイアウト目的の箱にはdivを使う、と使い分けましょう。

sectionとarticleとdivはどう使い分ければいいですか？

<section>は「テーマ的なまとまりを持つセクション」で、原則として見出しとセットで使います。<article>は「それ単体で独立したコンテンツ」（ブログ記事、ニュース記事など）に使います。<div>はどちらにも当てはまらない、意味を持たないグルーピングに使います。迷ったときは「このまとまりに見出しを付けられるか？」「この部分だけ切り出して別ページにしても成立するか？」と考えると判断しやすくなります。

セマンティックHTMLを使うとSEOの順位は上がりますか？

セマンティックHTMLの使用だけで劇的に順位が上がるとは限りません。しかし、検索エンジンがページの内容と構造を正しく理解するための「手がかり」が増えることは確かです。コンテンツの品質やリンクなど他の要因と合わせて、正しいHTML構造は「評価されやすい土台」として機能します。やらない理由よりやる理由の方が明確に多い施策です。

既存のページを全部直す必要がありますか？

理想的にはすべて修正したいところですが、現実には優先順位を付けて進めるのが効率的です。まずはアクセス数の多いページや、これから新規に作成するページから着手しましょう。特にランドマーク要素（header / main / footer）の追加と見出し階層の修正は、比較的少ない工数で大きな改善効果が見込めます。

W3C Validatorでエラーが出てもブラウザで正常に表示されます。直す意味はありますか？

ブラウザはエラーを自動補正して表示してくれますが、その補正結果が意図したものとは限りません。特にpの中にdivを入れるような入れ子違反は、ブラウザによって補正のされ方が異なる場合があり、表示が環境によって変わるリスクがあります。また、スクリーンリーダーや検索エンジンがブラウザと同じ補正をするとは限りません。「表示されている＝正しい」ではないことを意識しましょう。

まとめ：「動くHTML」から「伝わるHTML」へ

この記事では、HTMLの構造が悪い場合に起きる3つの実害を解説しました。

「divだけでも動いているから問題ない」──それは半分正解で、半分は見えていないリスクです。ブラウザが優秀なおかげで表面上は問題がないように見えますが、その裏側では検索エンジンもスクリーンリーダーも「このページの構造がよく分からない」と感じている可能性があります。

まずは今日、自分のHTMLを1ページだけW3C Validatorにかけてみてください。そしてHeadingsMapで見出し階層を確認してみてください。「直すべき箇所」が見えたら、この記事のBefore/Afterを参考に1つずつ改善していきましょう。

「動くHTML」から「伝わるHTML」へ。その一歩を踏み出すだけで、あなたのコードは確実にレベルアップします。

HTMLの見出しタグについてさらに詳しく学びたい方は「見出しタグ（h1・h2・h3）の正しい使い方とSEO効果」を、HTMLで実装できるSEO対策の基本を知りたい方は「コーディング初心者でもできる！HTMLで実装するSEO対策の基本5選」もあわせてご覧ください。