HTML5における代表的な書き方とタグの入れ子構造の正しい順序：徹底ガイド

Posted on by

HTML5は、Web標準の中核を成す仕様であり、セマンティックなタグと柔軟な構造が特徴です。
しかし、それ故に自由度が高く、間違った使い方もされやすくなっています。
本記事では、HTML5の基本的な書き方の基準、タグの正しい入れ子（ネスト）構造、
そして実務で使えるベストプラクティスを8000文字程度で詳しく解説します。

HTML5の基本構造とDOCTYPE宣言

HTML5文書は以下のような基本構造から始まります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>タイトル</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <!-- コンテンツ -->
</body>
</html>

ポイント

  • <!DOCTYPE html> はHTML5での標準宣言。
  • <html> タグに lang 属性を必ず指定。
  • <meta charset> で文字エンコーディングをUTF-8に設定。
  • モバイル対応のための <meta name="viewport"> を忘れずに。

セマンティックなタグの役割と使い所

HTML5では、セマンティック（意味的）なタグが多数導入されています。
これにより、コンテンツの構造が明確になり、
検索エンジンや支援技術（スクリーンリーダー等）にも理解しやすくなります。

主なセマンティックタグ

タグ役割
<header>ページやセクションのヘッダー部分
<footer>ページやセクションのフッター部分
<main>ページ内で主要なコンテンツ
<section>意味のあるセクション（小見出し単位）
<article>独立した記事・ブログ投稿など
<aside>補足情報（サイドバーなど）
<nav>ナビゲーションリンクの集合

タグの正しい入れ子構造（ネスト）

HTMLでは、タグの入れ子構造にルールがあります。
正しい構造で書くことは、レイアウトの安定性・アクセシビリティ・SEOに直結します。

一般ルール

  1. ブロック要素の中にインライン要素はOK。
  2. インライン要素の中にブロック要素はNG（ただしHTML5では一部OK）。
  3. ネスト構造は論理的・意味的順序に従う。

具体例：OKパターン

<article>
  <h2>見出し</h2>
  <p>段落の中に <strong>強調</strong> や <a href="#">リンク</a> を含める。</p>
</article>

NGパターン（HTML4までのルール）

<a href="#">
  <div>これはHTML4ではNG</div>
</a>

HTML5では一部容認

HTML5では、<a> タグにブロック要素を含めることが許容されました。

<a href="#">
  <div>
    <h3>タイトル</h3>
    <p>説明文</p>
  </div>
</a>

よくある誤用と修正例

【誤】<ul> の中に直接 <div> を入れる

<ul>
  <div><li>項目1</li></div> <!-- NG -->
</ul>

【正】<li> の中に <div> を入れる

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

【誤】<p> の中にブロック要素を入れる

<p>
  これは<p>の中に<div>などブロック要素を入れるのはNG。
  <div>NGな構造</div>
</p>

【正】<p> はインライン専用に

<p>これは正しい段落。</p>
<div>ブロック要素は外に出す</div>

よく使う入れ子構造のパターン集

ヘッダー構成

<header>
  <h1>サイトタイトル</h1>
  <nav>
    <ul>
      <li><a href="#">ホーム</a></li>
      <li><a href="#">会社概要</a></li>
    </ul>
  </nav>
</header>

記事・セクション構成

<main>
  <article>
    <header>
      <h2>記事タイトル</h2>
      <p>投稿日：2025年6月12日</p>
    </header>
    <section>
      <h3>はじめに</h3>
      <p>本文内容...</p>
    </section>
    <footer>
      <p>著者：Web編集部</p>
    </footer>
  </article>
</main>

アクセシビリティとSEOに配慮した構造

ポイント

  • h1〜h6 の見出し階層を守る
  • alt 属性のない <img> は非推奨
  • リンクの中身は明確に（”こちら” だけは避ける）

OK

<a href="/service/seo.html">SEO対策の詳細はこちら</a>

NG

<a href="/service/seo.html">こちら</a>

HTMLバリデーションでミスを防ぐ

HTML5には構文チェッカー（バリデータ）があります。
以下のようなツールでチェックすることで、タグの誤りや属性のミスを見つけられます。

まとめ：HTML5の書き方とネスト構造の基本原則

  1. DOCTYPE宣言と基本構造は忘れずに。
  2. セマンティックタグを使い、意味のある構造を意識。
  3. タグのネストはルールを守る（インラインとブロックの関係に注意）。
  4. バリデーションツールで確認。
  5. アクセシビリティやSEOを常に意識したマークアップを心がける。

HTML5は、正しく使えばSEO・アクセシビリティ・保守性の全てに効果的です。
見た目だけでなく、構造の正しさを意識したコーディングを行いましょう。