HTMLタグリファレンス

【はじめに：HTMLの基本文法】

ウェブページを記述する言語がHTML（HyperText Markup Language）です。HTMLは、文章に「見出し」「段落」「画像」「リンク」といった意味（構造）を与えるために使用されます。

この意味付けを行う基本単位を要素（Element）と呼びます。

1. 要素の基本構造

ほとんどの要素は、以下の構造で構成されます。

構成説明
開始タグ（<p>）要素が始まることを示します。
内容（コンテンツ）ブラウザに表示されるテキストや画像などです。
終了タグ（</p>）要素が終わることを示します（要素名の前にスラッシュ / が入ります）。
要素開始タグ、内容、終了タグを含めた一つのまとまりです。

ポイント：タグと要素の区別

<p> や </p> といった記号の並び自体をタグと呼び、それらが囲む一つの意味のまとまり全体を要素と呼びます。

2. 属性の記述ルール

要素に追加の情報や設定を与えるものを属性（Attribute）と呼びます。属性は開始タグの中に記述します。

  • 記述形式: <要素名 属性名=”属性値”>
  • 重要なルール: 属性名と要素名の間は半角スペースで区切ります。また、属性値は原則としてダブルクォーテーション（”）で囲んでください。

3. 終了タグが不要な要素（空要素）

一部の要素（<img>、<br>、など）は、内容を持たず、終了タグが不要です。これらの要素を空要素（Void Element）と呼びます。

HTML Living Standard

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 Living Standard」の仕様に基づいたHTMLタグリファレンスを、要素の主な機能別にご紹介します。

用語補足

HTMLは、ほとんど単語の頭文字や頭から数文字をとった略称になっています。そのままアルファベットを読んだり、単語を読んだりすれば良いのですが、複数の単語が組み合わさっている「href」や「iframe」といった頭の人文字だけアルファベットを読んで、残りは単語で読むという特殊な例もあります。

間違えた読み方で恥ずかしい思いをしないように正しい読み方でちゃんと覚えましょうね。

・ドキュメントの構造とメタデータ

要素名読み方（一般的）英語表記の略概要（用途）備考
<html>エイチティーエムエルHyperText Markup LanguageHTML文書のルート（根元）要素。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見出し（大見出しから小見出し）。<h1>はページの主要タイトルとして1つとし、適切なレベルで階層化する。

・コンテンツのグループ化

要素名読み方（一般的）英語表記の略概要（用途）備考
<p>ピー または パラグラフParagraph段落。
<hr>エイチアールHorizontal Ruleテーマの区切り（水平線）。終了タグは不要（空要素）。
<pre>プレPreformatted text整形済みテキスト（空白や改行をそのまま表示）。
<blockquote>ブロッククォートBlock Quotation別のソースからの長い引用。cite属性で引用元を指定。
<dd>ディーディーDescription Details説明リストの説明（値）。
<figure>フィギュアFigure自己完結したコンテンツ（図、写真、コード）。figcaptionとセットで使うことが多い。
<div>ディブ または ディヴィジョンDivision汎用的なコンテナ。特別な意味を持たないグループ化に使用。

・テキストレベルのセマンティクス

テキストの一部に意味付けを行う要素です。

要素名読み方（一般的）英語表記の略概要（用途）備考
<a>エー または アンカーAnchorハイパーリンク。href属性でリンク先URLを指定（例: 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>キャンバスCanvasJavaScriptでグラフィックを描画するための領域。
<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ラングLanguage要素の内容の自然言語（例: 日本語なら ja、英語なら en）を指定します。
titleタイトル要素に関する補足情報を提供します。マウスオーバーした際などにツールチップとして表示されることが多いです。
data-*データ・アスタリスク または データ属性カスタムデータ属性。data-で始まる任意の名前をつけ、JavaScriptから参照できるデータを要素に持たせます。
hiddenヒドゥン要素を非表示にする（ユーザーには表示されないようにする）。
tabindexタブインデックスTab IndexTabキーでの要素のフォーカス順序を指定します。
contenteditableコンテンツ・エディタブルContent Editableユーザーがブラウザ上で要素の内容を直接編集できる（入力可能にする）ようにします。
dirディアー または ディレクションDirectionテキストの方向（例: ltr：左から右、rtl：右から左）を指定します。
draggableドラッガブル要素をドラッグ可能にするかどうか（ドラッグ＆ドロップ機能）。
accesskeyアクセスキーAccess Keyキーボードショートカットとして要素にアクセスするためのキーを指定します。
aria-*アリア・アスタリスク または アリア属性WAI-ARIAWAI-ARIA (Web Accessibility Initiative ? Accessible Rich Internet Applications) の略。主にアクセシビリティを高めるために、支援技術（スクリーンリーダーなど）に情報を提供します。