◀ 8.

HTML 入門 — HTML5 / 文書構造・セマンティック要素・フォーム・アクセシビリティ

▶
編集
この記事の要点
  • HTML（HyperText Markup Language）は Web ページの構造を記述するマークアップ言語。HTML Living Standard が現行仕様
  • 基本構造: <!DOCTYPE html> + <html> + <head>（メタ情報）+ <body>（本文）
  • セマンティック要素（HTML5）: <header> <nav> <main> <article> <section> <aside> <footer> で意味を持つ構造を表現
  • アクセシビリティ: alt 属性、aria-* 属性、見出しレベル、ラベル付け。WCAG 2.1 準拠を目指す
  • 関連仕様: HTML Living Standard（WHATWG）/ W3C Validator（構文チェック）/ MDN（公式リファレンス）

HTML とは

HTML（HyperText Markup Language）は、Web ページの構造と意味を記述するためのマークアップ言語です。1991 年に Tim Berners-Lee が World Wide Web の基盤として開発しました。

現在の仕様は HTML Living Standard（WHATWG 策定）で、バージョン番号を持たず継続的に更新されています。通称 HTML5 は 2014 年に W3C 勧告された世代を指しますが、現在は Living Standard に統合されています。

基本的な文書構造

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ページの説明文">
    <title>ページタイトル</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>サイト名</h1>
        <nav>
            <ul>
                <li><a href="/">ホーム</a></li>
                <li><a href="/about">概要</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h2>記事タイトル</h2>
            <p>本文の段落です。</p>
        </article>
    </main>

    <footer>
        <p>© 2026 Example Inc.</p>
    </footer>

    <script src="app.js"></script>
</body>
</html>

要素とタグと属性

  • 要素 (Element): <p>テキスト</p> のような開始タグ + 内容 + 終了タグの組
  • タグ (Tag): <p> や </p> 単体
  • 属性 (Attribute): <a href="..." target="_blank"> のように要素に追加情報を与える 名前="値"
  • 空要素: <br> <hr> <img> <input> <meta> 等、内容を持たない要素

セマンティック要素（HTML5）

意味を持つ要素を使うことで、検索エンジン・スクリーンリーダー・開発者にとって理解しやすい構造になります。

要素意味使用例
<header>ページ / セクションのヘッダーサイトロゴ、ページタイトル
<nav>主要なナビゲーショングローバルメニュー、パンくず
<main>ページの主要コンテンツ（1 ページ 1 つ）記事本文、メインコンテンツ
<article>独立した記事 / 投稿ブログ記事、ニュース
<section>意味のあるまとまり章、節
<aside>本文と関連性の低いコンテンツサイドバー、関連リンク
<footer>ページ / セクションのフッター著作権、連絡先
<figure> / <figcaption>画像 + キャプション説明画像
<time>日時<time datetime="2026-05-17">

フォーム

<form action="/submit" method="post">
    <div>
        <label for="username">ユーザー名:</label>
        <input type="text" id="username" name="username" required>
    </div>
    <div>
        <label for="email">メール:</label>
        <input type="email" id="email" name="email" required>
    </div>
    <div>
        <label for="password">パスワード:</label>
        <input type="password" id="password" name="password" minlength="8">
    </div>
    <div>
        <label for="birthday">誕生日:</label>
        <input type="date" id="birthday" name="birthday">
    </div>
    <div>
        <label for="color">好きな色:</label>
        <input type="color" id="color" name="color">
    </div>
    <div>
        <label>性別:</label>
        <input type="radio" name="gender" value="male"> 男性
        <input type="radio" name="gender" value="female"> 女性
    </div>
    <div>
        <label for="country">国:</label>
        <select id="country" name="country">
            <option value="jp">日本</option>
            <option value="us">アメリカ</option>
        </select>
    </div>
    <div>
        <label for="message">メッセージ:</label>
        <textarea id="message" name="message" rows="5"></textarea>
    </div>
    <button type="submit">送信</button>
</form>

HTML5 で追加された入力タイプ: email、url、tel、number、range、date、time、color、search 等。ブラウザがバリデーションと専用 UI を提供します。

メディア要素

<!-- 画像 -->
<img src="photo.jpg"
     alt="代替テキスト（必須）"
     width="800"
     height="600"
     loading="lazy">

<!-- レスポンシブ画像 -->
<picture>
    <source media="(max-width: 600px)" srcset="small.jpg">
    <source media="(min-width: 601px)" srcset="large.jpg">
    <img src="default.jpg" alt="...">
</picture>

<!-- 動画 -->
<video controls width="640" poster="thumb.jpg">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    お使いのブラウザは動画に対応していません。
</video>

<!-- 音声 -->
<audio controls>
    <source src="sound.mp3" type="audio/mpeg">
    <source src="sound.ogg" type="audio/ogg">
</audio>

アクセシビリティ (a11y)

  • alt 属性: 画像には必ず代替テキスト。装飾画像は alt=""
  • 見出しレベル: h1 → h2 → h3 の順に階層的に。スキップしない
  • label: フォーム入力には <label for="..."> を必ず付ける
  • ARIA 属性: aria-label、aria-hidden、role 等で意味を補足
  • 色のコントラスト: WCAG AA 基準 4.5:1 以上
  • キーボード操作: tabindex、:focus スタイル

バリデーションと検証ツール

  • W3C Markup Validator: https://validator.w3.org/ で構文チェック
  • HTML Living Standard: https://html.spec.whatwg.org/ が公式仕様
  • MDN Web Docs: https://developer.mozilla.org/ がリファレンスの定番
  • Lighthouse: Chrome DevTools でアクセシビリティ・SEO 監査

FAQ

Q: HTML5 はもう古い？
A: 仕様としては HTML Living Standard に移行しましたが、機能セット（HTML5）は現役です。バージョン番号の概念がなくなっただけ。

Q: XHTML との違いは？
A: XHTML は XML の厳格な構文（必ず閉じタグ、属性は小文字 等）を要求しました。HTML5 では緩和されています。ただし JSX や Vue では XML 風の厳格な書き方が必要。

Q: <div> ばかりではダメ？
A: 動作はしますが、セマンティック要素を使うことで SEO・アクセシビリティ・保守性が向上します。意味のある場所は <article> <nav> <section> 等に置換しましょう。

Q: <!DOCTYPE html> は省略可能？
A: 省略するとブラウザが「Quirks Mode」になり、レイアウトが崩れます。必ず先頭行に書くこと。

📸 参考画像

※ 旧バージョンから引き継いだ参考画像です。手順・図解の補助としてご覧ください。

参考画像

編集
Post Share
子ページ
  1. 環境構築
  2. 文法
  3. 要素一覧
  4. API
  5. テンプレートエンジン
  6. <head>タグに書いた内容が<body>タグに移動する場合の解決方法
  7. 空白(スペース)の入力方法
  8. テキスト/セレクトボックス/ラジオボタン変更時のJS関数呼び出し
  9. buttonでformをsubmitさせない方法
同階層のページ
  1. Java
  2. PHP
  3. Python
  4. C#
  5. C++
  6. Ruby
  7. Go
  8. HTML
  9. CSS
  10. JavaScript
  11. TypeScript
  12. VBA
  13. Google Apps Script
  14. Julia
  15. Swift
  16. オブジェクト指向言語共通
  17. Gen
2026-06-11 07:12:00 guest 831

人気ページ

最近更新/作成されたページ