基本知識 2026年7月2日

【HTML基礎講座第8回】セマンティックHTMLとレイアウト：論理的で美しい文書構造を作る

HTML基礎講座全10回（第8回）

セマンティックHTMLとレイアウト：論理的で美しい文書構造を作る

第8回では、Webサイトの骨格レイアウトを定義する「セマンティック（意味のある）HTML」の思想を学びます。headerやmain、navといったレイアウト要素を正しく記述する目的をマスターしましょう。

📌 講座ロードマップ一覧（クリックで移動）

第1回第2回第3回第4回第5回第6回第7回第8回第9回第10回

1. セマンティックHTML（Semantic HTML）とは？

セマンティックとは「意味論的な」という意味です。HTML5では、文書の構造をブラウザや検索エンジン（Googleのクローラー）により正確に理解させるため、ただの四角い箱である `

` タグの代わりに、「意味を持ったレイアウト用タグ」を使用することが定められています。

💡 セマンティックHTMLにする3つのメリット

① 優れたSEO効果: 検索エンジンがページのどの部分がメインコンテンツで、どこが不要なフッターであるかを正しく評価しやすくなります。
② アクセシビリティの向上: スクリーンリーダーを使用するユーザーが、ナビゲーションメニューや本文へ一瞬でジャンプできるようになります。
③ コードの保守性向上: 他のデベロッパーがコードを見たときに、どこのブロックを修正すべきかが一目でわかります。

2. 代表的な構造レイアウトタグ

Webサイトの典型的なレイアウトを構成する基本タグは以下の通りです。

図：HTML5セマンティックタグを用いた標準的なページ構造

<header>: ページやセクションのヘッダー領域（ロゴやサイトタイトルなど）。
<nav> (Navigation): 主要なメニューリンクのまとまりを表す領域（グローバルナビゲーションなど）。
<main>: そのページの主たる「メインコンテンツ」を囲む領域。1ページに1回のみ使用します。
<article>: ニュース記事やブログ投稿など、それ単体で独立して完結している文書セクションを表します。
<aside>: メインコンテンツから外れた補足情報や、サイドバーを表す領域。
<footer>: ページの最下部（コピーライトや運営会社リンク、プライバシーポリシーリンクなど）。

3. グループ化の基本：divとspanの使い分け

意味のない、デザイン（スタイリング）やレイアウト目的のためだけに要素をグループ化したい場合には、div要素と span要素を使用します。

📦 div タグ (Block level group)

「ブロックレベル要素」のコンテナです。自動的に改行が入り、横幅いっぱいの箱を作ります。CSSで位置調整や枠線をつけたいレイアウトブロック全体を囲む際に使用します。

✏️ span タグ (Inline group)

「インライン要素」のコンテナです。改行を発生させず、文章テキストの「一部分（単語など）」だけを囲んで、そこだけにCSSで色をつけたりサイズを変えたりする場合に使用します。

4. セマンティックレイアウトの全体テンプレート

セマンティックタグを用いた、プロ仕様の論理的なWebページレイアウトのHTMLコードです。

layout-template.html

<header>
    <h1>Tech Blog</h1>
    <nav>
        <ul>
            <li><a href="/">ホーム</a></li>
            <li><a href="/about">会社概要</a></li>
        </ul>
    </nav>
</header>

<main>
    <article>
        <h2>HTML5の新しいセマンティック要素について</h2>
        <p>
            本文の文章が入ります。一部分だけ<span style="color:red;">赤文字</span>にします。
        
    </article>

    <aside>
        <h3>おすすめ記事一覧</h3>
    </aside>
</main>

<footer>
    <p>&copy; 2026 Tech Blog. All rights reserved.</p>
</footer>