タイトル: HTML
SEOタイトル: HTML 入門 — HTML5 / 文書構造・セマンティック要素・フォーム・アクセシビリティ
| この記事の要点 |
|
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」になり、レイアウトが崩れます。必ず先頭行に書くこと。
📸 参考画像
※ 旧バージョンから引き継いだ参考画像です。手順・図解の補助としてご覧ください。
