ログイン無料で始める

HTML/CSS 一覧

前へ3 / 11次へ

HTML/CSS/HTML基礎/Lesson 03

HTML の構造 — head と body の役割

30分·theory

このチャプター

2/3

HTML の構造 — head と body の役割

🎯 このレッスンを読み終えたら

このレッスンを読み終えると、以下の3つを自信を持ってできるようになります。

▸✅ block と inline の違い
▸✅ form・input・label の正しい接続方法
▸✅ img の alt テキストを書くための4つの原則

学習目標をチェックリストとして持ち、すべてに答えられるようになったらレッスンを閉じましょう。

HTML ページの解剖図

核心の一文

すべての HTML ページは + の2つに分かれます。head は目に見えないメタ情報、body は実際に見えるコンテンツです。

head — ページの裏面

html

<head>
    <meta charset="UTF-8">                        <!-- 文字化け防止 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ページタイトル</title>                    <!-- ブラウザタブ・検索結果 -->
    <meta name="description" content="ページの説明">  <!-- 検索結果のプレビュー -->
    <link rel="stylesheet" href="styles.css">     <!-- CSS の読み込み -->
    <link rel="icon" href="favicon.ico">          <!-- タブアイコン -->
    <script src="app.js" defer></script>           <!-- JS の読み込み -->
</head>

ここに入るもの:

▸メタ情報: エンコーディング・ビューポート・説明・OG（SNS シェア）
▸外部ファイルの読み込み: CSS・JS・フォント・アイコン
▸検索エンジン最適化（SEO）: title・description・canonical など

ユーザーには直接見えませんが、検索エンジン・SNS・アクセシビリティツールがこの情報を読み込みます。

body — ページの表面

html

<body>
    <header>...</header>
    <main>
        <article>実際のコンテンツ</article>
    </main>
    <footer>...</footer>
</body>

ユーザーが実際に見るコンテンツがすべて入ります。セマンティックタグ（header・main・article・section・aside・footer）で意味を構造化するのが標準です。

よく見落とされる必須5項目

1. <!DOCTYPE html> — HTML5 の宣言。省略すると後方互換モードで動作
2. <html lang="ko"> — 言語の明示。スクリーンリーダーや翻訳に影響
3. <meta charset="UTF-8"> — 文字化けを100%防止
4. <meta viewport> — モバイルのレスポンシブ対応に必須
5. <title> — SEO の最優先 + ブラウザタブ

OG タグ — SNS シェアのプレビュー

リンクをシェアする際、カカオトーク・Facebook に表示されるプレビューは OG（Open Graph）タグによって決まります:

html

<meta property="og:title" content="タイトル">
<meta property="og:description" content="説明">
<meta property="og:image" content="https://.../preview.png">
<meta property="og:url" content="https://example.com">

マーケティングにとって重要です。プレビューがなければクリック率が低下 ↓。

まとめ

head = 目に見えないメタ、body = 実際のコンテンツ。両方漏らさず、セマンティックに書くことが良い HTML です。

アクセシビリティ（a11y）・セマンティック HTML・SEO の関係

セマンティックタグが実際に何を変えるか

1. スクリーンリーダー — 目なしでウェブを聴く人

html

<!-- ❌ 意味のない div -->
<div onclick="navigate('/about')">紹介</div>

<!-- ✅ セマンティック -->
<a href="/about">紹介</a>

NVDA・VoiceOver が「リンク: 紹介」と自動的に案内します。div のクリックは読み上げられません。

2. キーボードユーザー — マウスを使えない人

▸<a>、<button> はTab でフォーカス + Enter で有効化がデフォルト
▸<div onclick> はTab フォーカスなし。tabindex="0" + role="button" + キーボードイベントの手動処理が必要

3. SEO — Google ボットが意味を理解する

html

<main>
    <article>
        <h1>タイトル</h1>
        <section>
            <h2>セクションタイトル</h2>
            <p>本文...</p>
        </section>
    </article>
    <aside>関連記事</aside>
</main>

Google がどこが本文かを自動判別します。SEO スコアが向上します。

ARIA の4つの核心属性

role — 意味の付与

html

<div role="alert">保存に失敗しました</div>
<!-- スクリーンリーダーが*即座に*読み上げます（alert role の特性） -->

<div role="button" tabindex="0" onkeydown="if(event.key==='Enter')click()">
    ボタン
</div>

可能であればセマンティックタグ（<button>）を優先してください。ARIA は代替手段がない場合のみ使用します。

aria-label — 目に見えないラベル

html

<!-- アイコンのみのボタン -->
<button aria-label="メニューを開く">
    <svg>...</svg>
</button>

視覚的なテキストがないボタンの意味を伝えます。アイコンボタンや検索ボックスに必須。

aria-hidden — スクリーンリーダーから隠す

html

<svg aria-hidden="true">...</svg>   <!-- 装飾用アイコン -->
<span aria-hidden="true">→</span>   <!-- 視覚的な矢印 -->

テキスト情報が重複している場合、アイコン自体を隠します。

aria-describedby — 追加説明の紐付け

html

<input id="email" aria-describedby="email-hint">
<small id="email-hint">例: [email protected]</small>

フォーカス時にヒントも一緒に読み上げます。

alt テキスト — 4つの原則

html

<!-- ❌ 意味がない -->
<img src="chart.png" alt="画像">

<!-- ❌ 詳細すぎる -->
<img src="logo.png" alt="赤い丸い背景に白い文字で CodeMaster と書かれたロゴ">

<!-- ✅ 情報を伝える -->
<img src="chart.png" alt="2025年月別売上: 1月100万〜12月250万">

<!-- ✅ 装飾用 -->
<img src="divider.png" alt="">    <!-- 空の alt = 無視するよう明示 -->

ルール:
1. 画像の意味をテキストで伝える
2. 装飾用は alt=""（省略不可）
3. 「画像」「写真」などの単語は禁止（スクリーンリーダーがすでに「画像」と案内している）
4. 短く明確に

tabindex — フォーカス順序

html

<div tabindex="0">   <!-- フォーカス可能（自然な順序） -->
<div tabindex="-1">  <!-- フォーカス不可（プログラムのみ） -->
<div tabindex="5">   <!-- ❌ 正の値は使用禁止 — 自然な順序が崩れる -->

正の tabindex はアンチパターンです。DOM の順序に従ってください。

素早い確認ツール

▸Lighthouse（Chrome DevTools）— アクセシビリティスコア
▸axe DevTools 拡張機能 — 自動診断
▸スクリーンリーダーを直接使用 — Mac VoiceOver（Cmd+F5）、Windows NVDA

🤖 AI にこう依頼してみましょう

▸「この div ベースのボタンをセマンティックな button タグに変えて、キーボードアクセシビリティも追加して」
▸「すべてのアイコンボタンに aria-label を追加して」
▸「このページの alt テキストを意味中心に書き直して」

先に読むとよい概念: HTMLとは？

次のおすすめ: フォームタグ

HTMLとは？前へ一覧フォームタグ次へ

HTML文書構造 - HTML/CSS