過去バージョン

この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;background:#fffbea;border:1px solid #f4c430;margin:1em 0;width:100%"><tr><td style="background:#f4c430;color:#000;font-weight:bold;padding:8px">この記事の要点</td></tr><tr><td style="padding:10px"><ul><li><strong>HTML</strong>（HyperText Markup Language）は Web ページの構造を記述するマークアップ言語。<strong>HTML Living Standard</strong> が現行仕様</li><li>基本構造: <code><!DOCTYPE html></code> + <code><html></code> + <code><head></code>（メタ情報）+ <code><body></code>（本文）</li><li><strong>セマンティック要素</strong>（HTML5）: <code><header> <nav> <main> <article> <section> <aside> <footer></code> で意味を持つ構造を表現</li><li><strong>アクセシビリティ</strong>: <code>alt</code> 属性、<code>aria-*</code> 属性、見出しレベル、ラベル付け。WCAG 2.1 準拠を目指す</li><li>関連仕様: <strong>HTML Living Standard</strong>（WHATWG）/ <strong>W3C Validator</strong>（構文チェック）/ <strong>MDN</strong>（公式リファレンス）</li></ul></td></tr></table>
<h2>HTML とは</h2>

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

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

<h2>基本的な文書構造</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!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>&copy; 2026 Example Inc.</p>
    </footer>

    <script src="app.js"></script>
</body>
</html></code></pre>
<h2>要素とタグと属性</h2>

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

<h2>セマンティック要素（HTML5）</h2>

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

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

<h2>フォーム</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><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></code></pre>
<p><strong>HTML5 で追加された入力タイプ</strong>: <code>email</code>、<code>url</code>、<code>tel</code>、<code>number</code>、<code>range</code>、<code>date</code>、<code>time</code>、<code>color</code>、<code>search</code> 等。ブラウザがバリデーションと専用 UI を提供します。</p>

<h2>メディア要素</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- 画像 -->
<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></code></pre>
<h2>アクセシビリティ (a11y)</h2>

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

<h2>バリデーションと検証ツール</h2>

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

<h2>FAQ</h2>

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

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

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

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