よくあるNG例と改善策：HTML構造のアンチパターン集

NG1：見出しの順序がバラバラ

<h1>サイトタイトル</h1>
<h3>サービス紹介</h3>
<h2>会社情報</h2>

❌ 問題点

見出しタグは文書構造を表すものであり、順序は論理的である必要があります。見出しの階層が逆転すると、スクリーンリーダーや検索エンジンが正しく内容を理解できません。

✅ 改善例

<h1>サイトタイトル</h1>
<h2>サービス紹介</h2>
<h2>会社情報</h2>

---

NG2：divばかりで意味を持たない構造

<div class="header">
  <div class="nav"></div>
</div>
<div class="main">
  <div class="content"></div>
</div>

❌ 問題点

div要素ばかりだと、構造の意味が不明瞭になり、可読性・保守性・アクセシビリティが低下します。

✅ 改善例（HTML5セマンティックタグを使用）

<header>
  <nav></nav>
</header>
<main>
  <section class="content"></section>
</main>

---

NG3：テーブルレイアウトの乱用

<table>
  <tr>
    <td>左メニュー</td>
    <td>メインコンテンツ</td>
  </tr>
</table>

❌ 問題点

テーブルは本来、表形式のデータに使うものであり、レイアウト目的で使うとレスポンシブ対応が困難になりがちです。

✅ 改善例（CSSでレイアウトを構築）

<div class="layout">
  <aside class="sidebar">左メニュー</aside>
  <main class="content">メインコンテンツ</main>
</div>

---

NG4：ラベルのないフォーム要素

<input type="text" name="email">

❌ 問題点

label要素がないと、ユーザーが何を入力すべきか分かりにくく、スクリーンリーダーでも意味が伝わりません。

✅ 改善例

<label for="email">メールアドレス</label>
<input type="text" id="email" name="email">

---

NG5：aタグの入れ子

<a href="/about">
  <div>
    <a href="/company">会社情報</a>
  </div>
</a>

❌ 問題点

HTMLの仕様では、aタグの中に別のaタグを入れることは禁止されています。ワイヤーフレームやデザインの段階で、リンク要素が重なっていないかを事前にチェックしておくことが重要です。ブラウザによっては正しく表示されないこともあり、ユーザーにとっても予期しない挙動になります。

✅ 改善例

リンクを分離する、あるいは片方をボタンなど別の要素に変更しましょう。

<div>
  <a href="/about">概要</a>
  <a href="/company">会社情報</a>
</div>

---

NG6：button要素をリンク代わりに使う

<button onclick="location.href='/contact'">お問い合わせ</button>

❌ 問題点

buttonタグはフォーム送信用の要素であり、リンクの代用として使うのは適切ではありません。ユーザーの期待と異なる動作になることがあり、アクセシビリティにも影響します。

✅ 改善例

<a href="/contact" class="btn">お問い合わせ</a>

---

NG7：hタグやpタグの中にブロック要素を入れる

<p>
  <div>段落内のブロック</div>
</p>

<h2>
  <section>見出し内のブロック</section>
</h2>

❌ 問題点

<p>や<h1>〜<h6>タグは、インライン要素（phrasing content）のみを含むことが許可されています。これらのタグの中にdivやsectionなどのブロック要素を入れると、構文エラーとなり、ブラウザが自動的にタグを閉じて意図しない表示になることがあります。

✅ 改善例

<p>正しい段落構造です。</p>
<div>ブロック要素はpの外に出します。</div>

<h2>正しい見出し</h2>
<section>構造化されたコンテンツ</section>

---

NG8：ulやolの中にdivを入れる

<ul>
  <div><li>項目1</li></div>
  <div><li>項目2</li></div>
</ul>

❌ 問題点

ulやolタグの中には、直接liタグのみを含める必要があります。divで囲むと構文エラーとなり、スタイルやDOM構造にも悪影響を及ぼします。

✅ 改善例

<ul>
  <li>項目1</li>
  <li>項目2</li>
</ul>

---

NG9：インライン要素の中にブロック要素を入れる

<span>
  <div>これはNGです</div>
</span>

❌ 問題点

spanなどのインライン要素は、インライン要素（phrasing content）のみを含めることができます。中にdivやsectionなどのブロック要素（flow content）を入れるのはHTMLの仕様違反であり、意図しない表示やアクセシビリティの問題を引き起こします。

✅ 改善例

<div>
  <span>これはOKです</span>
  <div>これもOKです</div>
</div>

---

NG10：imgタグにalt属性がない

<img src="photo.jpg">

❌ 問題点

imgタグにalt属性がないと、視覚障害者が使用するスクリーンリーダーで画像の内容が伝わりません。また、画像が読み込めなかった場合の代替テキストが表示されないため、ユーザー体験が損なわれます。

✅ 改善例

<img src="photo.jpg" alt="風景写真">

---

まとめ：正しいHTML構造は、ユーザー体験とSEOの両面で重要です。

HTMLの構造は、見た目だけでなく意味や意図を持って設計することが重要です。誤った構造は、ユーザーの体験や検索エンジンの評価にも影響を与える可能性があります。今回紹介したアンチパターンに心当たりがあれば、ぜひコードを見直して改善してみましょう。正しいHTMLは、ウェブサイトの品質そのものを高めてくれます。