HTML Living Standard（HTMLリビング・スタンダード）とは、ウェブページの記述言語である HTML の現在の公式な仕様（標準規格）のことです。
これは、ブラウザ開発者によって設立された団体である WHATWG (Web Hypertext Application Technology Working Group) によって策定・管理されています。
主な特徴
- 「生きている」規格 (Living Standard):
- 従来のHTML5のように「バージョン5.0」「バージョン5.1」といった区切りで固定されるのではなく、常に最新の状態に更新され続けるという特徴を持っています。
- ウェブ技術やブラウザの実装に合わせて、要素やAPIの追加・変更が継続的に行われます。
- 現在の標準規格:
- かつてはW3C（World Wide Web Consortium）がHTML5の規格を定めていましたが、2021年にHTMLの標準化はWHATWGに一本化され、HTML Living Standardが唯一のHTMLの標準仕様となりました。
- 実用性重視:
- ブラウザベンダー（Apple、Mozilla、Googleなど）が中心となって策定しているため、実際のブラウザ実装やウェブ開発での実用性を重視しています。
- HTML5との関係:
- HTML Living Standardは、実質的にHTML5の後継であり、その仕様を引き継いでいます。
- したがって、基本的なHTMLの記述方法（タグの書き方など）はHTML5とほとんど変わりません。主に、要素や属性の追加・変更・廃止といった細かなアップデートが継続的に行われています。
ウェブ開発者が現在「HTML」という場合、この「HTML Living Standard」の仕様に基づいたものを指します。
HTMLタグリファレンス
「HTML Living Standard」の仕様に基づいたHTMLタグリファレンスを、要素の主な機能別にご紹介します。
HTML Living Standardは、HTMLの最新かつ継続的に更新される標準規格であり、ここに記載されている要素はすべて現在のウェブ開発で推奨されています。
HTMLは、ほとんど単語の頭文字や頭から数文字をとった略称になっています。そのままアルファベットを読んだり、単語を読んだりすれば良いのですが、複数の単語が組み合わさっている「href」や「iframe」といった頭の人文字だけアルファベットを読んで、残りは単語で読むという特殊な例もあります。
間違えた読み方で恥ずかしい思いをしないように正しい読み方でちゃんと覚えましょうね。
・ドキュメントの構造とメタデータ
| 要素名 | 読み方（一般的） | 英語表記の略 | 概要（用途） | 備考 |
|---|---|---|---|---|
<html> | エイチティーエムエル | HyperText Markup Language | HTML文書のルート（根元）要素。 | lang属性で言語を指定。 |
<link> | リンク | Link | 外部リソース（CSS、ファビコンなど）を文書と関連付ける。 | |
<meta> | メタ | Metadata | 文字エンコーディングやビューポート設定などのメタデータ。 | |
<style> | スタイル | Style | 文書にCSSスタイルを埋め込む。 | 外部ファイル参照が推奨。 |
・セクショニング（章立て）
セマンティックな（意味的な）構造を定義するための要素です。
| 要素名 | 読み方（一般的） | 英語表記の略 | 概要（用途） | 備考 |
|---|---|---|---|---|
<article> | アーティクル | Article | 自己完結したコンテンツ（ブログ記事、ニュース記事など）。 | |
<section> | セクション | Section | 一般的なセクション（章、節）。 | 見出し要素（<h1>～<h6>）を含むべき。 |
<main> | メイン | Main | 文書の主要なコンテンツ。 | 文書内に一つだけ配置すべき。 |
<footer> | フッター | Footer | 文書またはセクションのフッター部分（著作権情報、連絡先など）。 | |
<address> | アドレス | Address | 文書または<article>の連絡先情報。 | |
<h1>～<h6> | エイチワン?エイチシックス | Heading 1?6 | 見出し（大見出しから小見出し）。 | 適切なレベルで階層化する。 |
・コンテンツのグループ化
| 要素名 | 読み方（一般的） | 英語表記の略 | 概要（用途） | 備考 |
|---|---|---|---|---|
<p> | ピー または パラグラフ | Paragraph | 段落。 | |
<hr> | エイチアール | Horizontal Rule | テーマの区切り（水平線）。 | |
<pre> | プレ | Preformatted text | 整形済みテキスト（空白や改行をそのまま表示）。 | |
<blockquote> | ブロッククォート | Block Quotation | 別のソースからの長い引用。 | cite属性で引用元を指定。 |
<dd> | ディーディー | Description Details | 説明リストの説明（値）。 | |
<figure> | フィギュア | Figure | 自己完結したコンテンツ（図、写真、コード）。 | figcaptionとセットで使うことが多い。 |
<div> | ディブ または ディヴィジョン | Division | 汎用的なコンテナ。特別な意味を持たないグループ化に使用。 |
・テキストレベルのセマンティクス
テキストの一部に意味付けを行う要素です。
| 要素名 | 読み方（一般的） | 英語表記の略 | 概要（用途） | 備考 |
|---|---|---|---|---|
<a> | エー または アンカー | Anchor | ハイパーリンク。 | href属性でリンク先URLを指定。 |
<strong> | ストロング | Strong | 重要性の強調。 | |
<small> | スモール | Small | 免責事項や著作権などの注釈。 | |
<s> | エス | Strikethrough | もはや正確ではない、または関連性がなくなったコンテンツ。 | 取り消し線で表示されることが多い。 |
<abbr> | エイビービーアール | Abbreviation | 略語（頭字語）。 | title属性で正式名称を指定。 |
<time> | タイム | Time | 特定の時間や日付。 | |
<code> | コード | Code | コンピュータのコード（プログラムコード）。 | |
<kbd> | ケービーディー | Keyboard input | ユーザー入力（キーボード入力、音声コマンドなど）。 | |
<var> | ヴァー または バリアブル | Variable | 変数（数学の変数やプログラムの変数名）。 | |
<samp> | サンプ または サンプル | Sample output | プログラムの出力例。 | |
<span> | スパン | Span | 汎用的なインラインコンテナ。特別な意味を持たないグループ化。 | |
<br> | ビーアール | Line Break | 改行。 | |
<i> | アイ | Italic (Idiomatic Text) | 代替テキスト、専門用語、思考など（イタリック体で表示されることが多い）。 | |
<b> | ビー | Bold (Bring Attention To) | 注意を引くためのテキスト（太字で表示されることが多い）。 | 意味的な重要性はない。 |
・埋め込みコンテンツ
| 要素名 | 読み方（一般的） | 英語表記の略 | 概要（用途） | 備考 |
|---|---|---|---|---|
<img> | アイエムジー または イメージ | Image | 画像を埋め込む。 | src（必須）、alt（必須）、width, height属性。 |
<embed> | エンベッド | Embed | 外部のプラグインコンテンツを埋め込む。 | |
<object> | オブジェクト | Object | 外部リソース（プラグイン、PDF、Flashなど）を埋め込む。 | |
<video> | ビデオ | Video | 動画コンテンツを埋め込む。 | |
<audio> | オーディオ | Audio | 音声コンテンツを埋め込む。 | |
<canvas> | キャンバス | Canvas | JavaScriptでグラフィックを描画するための領域。 | |
<svg> | エスブイジー | Scalable Vector Graphics | スケーラブル・ベクター・グラフィックス（XMLベースの2Dグラフィック）。 |
・フォームとインタラクティブ要素
| 要素名 | 読み方（一般的） | 英語表記の略 | 概要（用途） | 備考 |
|---|---|---|---|---|
<form> | フォーム | Form | ユーザー入力を収集するためのフォーム。 | action, method属性。 |
<button> | ボタン | Button | クリック可能なボタン。 | type属性（submit, reset, button）で種類を指定。 |
<legend> | レジェンド | Legend | <fieldset>でグループ化された部品の見出し。 | |
<details> | ディテールズ | Details | ユーザーが開閉できるウィジェット（概要と詳細）。 | |
<summary> | サマリー | Summary | <details>要素の見出し（常に表示される部分）。 | |
<dialog> | ダイアログ | Dialog | ダイアログボックスやポップアップウィンドウ。 | showModal()メソッドで表示。 |
・グローバル属性（すべての要素に適用可能）
ほとんどすべてのHTML要素に指定できる共通の属性です。
| 属性名 | 読み方（一般的） | 英語表記の略 | 概要（用途） | 備考 |
|---|---|---|---|---|
| id | アイディー | 要素を一意に識別するための識別子。CSSやJavaScriptから要素を特定する際に使います。 | ||
| class | クラス | 要素をグループ化し、主にCSSでスタイルを適用したり、JavaScriptで操作したりするために使います。 | ||
| style | スタイル | 要素に直接インラインでCSSを記述するための属性。 | ||
| lang | ラング | 要素の内容の自然言語（例: 日本語ならja、英語ならen）を指定します。 | ||
| title | タイトル | 要素に関する補足情報を提供します。マウスオーバーした際などにツールチップとして表示されることが多いです。 | ||
| data-* | データ・アスタリスク または データ属性 | カスタムデータ属性。data-で始まる任意の名前をつけ、JavaScriptから参照できるデータを要素に持たせます。 | ||
| hidden | ヒドゥン | 要素を非表示にする（ユーザーには表示されないようにする）。 | ||
| tabindex | タブインデックス | Tabキーでの要素のフォーカス順序を指定します。 | ||
| contenteditable | コンテンツ・エディタブル | ユーザーがブラウザ上で要素の内容を直接編集できる（入力可能にする）ようにします。 | ||
| dir | ディアー または ディレクション | テキストの方向（例: ltr：左から右、rtl：右から左）を指定します。 | ||
| draggable | ドラッガブル | 要素をドラッグ可能にするかどうか（ドラッグ＆ドロップ機能）。 | ||
| accesskey | アクセスキー | キーボードショートカットとして要素にアクセスするためのキーを指定します。 | ||
| aria-* | アリア・アスタリスク または アリア属性 | WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) の略。主にアクセシビリティを高めるために、支援技術（スクリーンリーダーなど）に情報を提供します。 |