HTML Tag Reference

HTML の基礎知識

HTML の基本的な知識について簡単に解説しています。

HTML とは

「HTML」とは、「HyperText Markup Language / ハイパーテキスト・マークアップ・ランゲージ」の略語です。つまり HTML は、「ハイパーテキスト（HyperText）」を記述するための「マークアップ言語（Markup Language）」であると説明できます。

ではそもそも「ハイパーテキスト」とは何でしょうか。ハイパーテキストという用語は、1965 年にテッド・ネルソン（Theodor Holm Nelson）氏によって生み出されました。

複数の文書（テキスト）を相互に関連付け、それら文書を自由に辿ることができる仕組みとして考案されたハイパーテキストは、テッド・ネルソン氏が中心となった HES（Hypertext Editing System）プロジェクト、あるいは「マウス」を発明したことでも知られるダグラス・エンゲルバート（Douglas Carl Engelbart）氏が中心となって開発された NLS（oN-Line System）などによって最初期の研究開発が行われましたが、起源を辿れば、その着想には 1945 年にヴァネヴァー・ブッシュ（Vannevar Bush）氏が当時の「アトランティック・マンスリー（The Atlantic Monthly）」誌に寄稿した論文「As We May Think」の中に登場する「Memex（メメックス）」と呼ばれる記憶拡張機械の概念が大きな影響を与えたことが知られています。

その後、1989 年にティム・バーナーズ＝リー（Tim Berners-Lee）氏の考案により、ハイパーテキストをインターネットと結合させることによって今日、我々が日常的に利用している World Wide Web（ワールド・ワイド・ウェブ / 以降「ウェブ」よ呼びます）が発明されました。つまり、ウェブは、インターネット上で提供される巨大なハイパーテキストシステムなのです。

ウェブを構成する根本的な標準規格と呼ばれるものが 3 つ存在します。

  1. URL
    ウェブページのようなウェブ上のリソースを参照するため、その場所を示すもの。
  2. HTTP（Hypertext Transfer Protocol）
    ブラウザ（クライアント）とウェブサーバの間で行われる通信の方法を取り決めるもの。
  3. HTML
    ハイパーテキスト文書、つまりウェブ上で公開されるコンテンツを記述するための言語。

HTML は、ウェブを構成する最も重要な要素のひとつであり、ウェブ上でコンテンツを公開するために、まず最初に理解する必要がある言語だということができます。

HTML の役割

例えば下記のようなテキストがあったとしましょう。

本日の議題
今日の会議では下記の項目について議論します。
1. 会社ウェブサイトのリニューアルについて
2. 競合サイト「https://example.com/」について意見交換
3. 社員旅行のおやつ代について徹底議論

人間はテキストを読むことで、その文脈を理解、推測することができるため、最初の 1 行目が見出しであり、2 行目が本文、3 行目以降は本文の中でも箇条書きであって、さらにそれらには順序がある、さらに箇条書きの中に書いてある「https://」からはじまる文字列は競合サイトの URL なのだな、ということがわかりますが、ソフトウェアはこのようなテキスト情報のみから、どこが見出しでどこが本文なのかなどを正しく判別することは困難です。

そこで、HTML を使用して、下記のようにテキストに印を付けることで「意味」を与え、それによってソフトウェアがテキストを処理をしやすくしてあげるのです。

<h1>本日の議題</h1>
<p>今日の会議では下記の項目について議論します。</p>
<ol>
  <li>会社ウェブサイトのリニューアルについて</li>
  <li><a href="https://example.com/">競合サイト</a>について意見交換</li>
  <li>社員旅行のおやつ代について徹底議論</li>
</ol>

これによって、「この部分は見だしである」、あるいは「このテキストはリンクなのだ」という風にソフトウェアがテキストの意味を理解し、それに合わせた表示や機能を割り振ったり、必要な部分を抜き出して処理するといったことができるようになります。

このような、ソフトウェアが判別可能な状態を「マシンリーダブル」といいますが、HTML のようなマークアップ言語は、人間が読んでも意味を理解でき、かつソフトウェアが読んでもその意味が判読可能な構造化された文書を作成することができます。

なお、 <h1> など、<> で囲まれたマークを、HTML における「タグ（Tag）」と呼びます。そして、<h1>本日の議題</h1> のように、タグでマークアップされ、意味づけされたまとまりを「要素（Element）」と呼びます。

HTML は、仕様（Specification）によって各タグが持つ意味や使い方、タグを記述する際に満たさなければならないルールなどが定められています。HTML を学習するということは、仕様に基づいた正しい HTML の記述ができるよう、仕様の内容を理解していくことだといえます。

HTML の仕様

HTML に限らず、多くの人や組織が利用する技術や仕組みには標準化された仕様、規格が必要になります。

例えば標準化された HTML の仕様がなく、ウェブでコンテンツを公開する人が、「私が便利だから、私が独自に作ったマークアップ言語で文書を作って公開します」といったことを各自で勝手にやってしまえば、それを表示するためのソフトウェア、つまりブラウザを開発するベンダは困ってしまいますし、逆にブラウザベンダが自分たちの都合で好き勝手に独自の HTML 仕様を定義していってしまえば、コンテンツ制作者は特定のブラウザだけに依存したコンテンツを作ることを余儀なくされるか、ブラウザごとに別々の仕様を理解してコンテンツを作らなければならなくなり、非効率なだけでなく、一定のシェアをもつブラウザベンダが自分たちに優位なように仕様を決めてウェブをコントロールするようなことが起こりえます（実際に過去にはそういう状況になった時代もありました）。

そこで、世界には「標準化団体」と呼ばれる、みんなが共通して使える標準仕様を決めるための団体が存在します。

ウェブに関連する標準化団体で代表的なものとしては、下記が挙げられます。

  • 国際標準化機構（ISO / International Organization for Standardization）
  • インターネット技術特別調査委員会（IETF / Internet Engineering Task Force）
  • W3C（World Wide Web Consortium）
  • WHATWG（Web Hypertext Application Technology Working Group）

国際標準化機構は、「ISO 規格」として様々な国際規格を策定しており、ご存じの読者も多いのではないでしょうか。電気工学や電子工学関連の標準化団体である国際電気標準会議（IEC / International Electrotechnical Commission）と共同で「ISO/IEC」と呼ばれる共同規格の策定も行っています。

日本国内において同様の役割を果たしているのが日本産業規格（JIS / Japanese Industrial Standards）で、ISO などが策定する国際規格との整合性を保ちながら、国内向けの規格を策定、整備しています。

IETF は主にインターネット上で使用される通信プロトコルに関する技術的な標準規格を策定する団体で、策定された技術仕様は、RFC（Request For Comments）と呼ばれる文書として公開されています。

現在における HTML の仕様策定に重要な役割を果たしているのが WHATWG です。

HTML 仕様の策定には長い歴史があり、HTML の元となった SGML（Standard Generalized Markup Language）は、ISO 規格として標準化されました。その後、IETF 策定による HTML の最初の草案から HTML 2.0 仕様の標準化を経て W3C が HTML の仕様策定における主要団体となり、1997 年 1 月の HTML 3.2 以降は W3C が定める仕様策定プロセスを経て「勧告」という形で、安定版の仕様が公開されるようになります。

その後も 1997 年 12 月には HTML 4.0、1999 年 12 月には HTML 4.01 と仕様のバージョンアップが行われ、さらにそれをベースにして XHTML 1.0 が 2000 年 1 月に、XHTML 1.1 が 2001 年 5 月に W3C 勧告となるなど、比較的安定した状況が続いていましたが、時代の変化によって HTML にもアプリケーション的な機能、よりリッチな表現力などが求められるようになります。

このような要望の中、HTML を再開発して新しいバージョンを策定しようという要望が主にブラウザベンダから出されますが、W3C が新しい HTML 仕様の策定に当初前向きでなかったことから新たに生まれたのが WHATWG です。WHATWG は、Apple、Mozilla、Opera の開発者たちによって立ち上げられ、そこで新しい HTML の仕様である「HTML Living Standard」の策定がスタートします。

「HTML Standard」とは「HTML 仕様」ということですが、「Living Standard」、つまり「継続的に更新され続ける仕様」というステータスとなっており、ここが W3C の仕様策定プロセスのように、あるタイミングで「勧告」という安定版をリリースして一旦仕様策定は完了。という区切りを付ける仕様策定の手法とは大きく異なる部分です。

後に W3C も WHATWG が策定する HTML 仕様を取り込む形で HTML5 の仕様策定を進めます。実際に HTML5 仕様が 2014 年 10 月に、HTML 5.1 仕様が 2016 年 11 月に、さらに HTML 5.2 仕様が 2017 年 12 月にそれぞれ W3C 勧告となりますが、その過程で、ある程度期限を切りながらしっかりと意見を集めることで、確定した仕様を策定したい W3C と、柔軟に、継続して仕様をブラッシュアップしていきたい考えの WHATWG との間で意見の相違が生まれ、仕様策定は袂を分かつ結果となります。

HTML 5.2 仕様が W3C 勧告となるころには、WHATWG が更新していく仕様と、W3C が勧告する仕様の間に内容の食い違いや矛盾点が含まれるようになり、結果として 2 つの異なる HTML 仕様が存在してしまう状況が生まれます。ブラウザベンダは W3C の仕様を無視し、WHATWG の仕様に合わせてブラウザの開発を進めるため、コンテンツ制作者はどちらの仕様を参照すればよいのかわからなくなるという混乱が生じることになり、ついに 2019 年、W3C と WHATWG との間でかわされた覚書をもって、HTML 仕様は WHATWG 仕様に一本化されることとなりました。

よって、現時点において参照すべき HTML の仕様は、唯一、WHATWG が策定する「HTML Living Standard」のみとなりました。この HTML 仕様はウェブ上で公開されており、誰でも閲覧することができるようになっています。原文は英語のドキュメントとなっていますが、有志による日本語訳も公開されています。

ただし、正式な仕様は英語版のオリジナルであることには注意してください。日本語訳には誤訳、あるいは最新の仕様との差分が発生している場合があります。もし誤訳を見つけた場合などは翻訳者にフィードバックを送るとよいでしょう。

HTML の記述ルール

前述したとおり、HTML は、タグを用いてテキストをマークアップすることで、意味を明示し、データを構造化するものです。ここではハイパーリンクとして機能する a 要素の記述方法を例に、HTML の基本的な書式を解説します。 

<a href="https://burnworks.com/">バーンワークス株式会社</a>

開始タグと終了タグ

後述する「空要素」を除き、原則として HTML 要素は、開始タグと終了タグに囲まれたひとかたまりで構成されます。

開始タグは、サンプルソースにおける <a> の部分で、終了タグは </a> の部分です。

開始タグは < と > の間に要素名を示す英単語が入り、必要に応じて、後述する「属性」を記述することができます。

終了タグは </ と > の間に、開始タグと同じ要素名を示す英単語を記述します。終了タグには属性を記述することができません。

終了タグの省略

原則として HTML 要素は開始タグと終了タグで囲まれている必要がありますが、一定の条件の下に終了タグ記述を省略することが仕様上、許されています。

例えば li 要素の説明部分には下記のような記述があります。

An li element's end tag can be omitted if the li element is immediately followed by another li element or if there is no more content in the parent element.

「li 要素の終了タグは、li 要素の直後に別の li 要素が続く場合、または親要素にそれ以上コンテンツがない場合に省略することができます。」

よって、下記の記述は仕様上許される記述方法となります。

<ol>
  <li>項目 01
  <li>項目 02
  <li>項目 03
</ol>

ただし、終了タグの省略は HTML ソースコードの可読性を低下させたり、メンテナンス時に思わぬミスを誘発するなど問題となるケースも多いため、著者としては終了タグの省略は推奨せず、必ず終了タグを記述する癖をつけることをお薦めします。本書に掲載しているサンプルソースコードにおいては終了タグの省略は行っておりません。

コメント

HTML において、<!-- と --> で囲むことで、その範囲内に記述された内容はコメントとして扱われます。例えばヘッダやフッタといったパーツごとの区切りがわかりやすいようにメモを入れたり、開始タグに対して対応する終了タグがどれかをわかりやすくして、ソースコードの可読性やメンテナンス性を上げたりするといった用途で使用できます。

また、コメント内に HTML タグを記述した場合でも、それらはタグではなくコメントとして扱われるため、例えばある要素のブロックをコメントアウトして一時的にウェブページから削除したい場合などにも利用できます。

コメントはウェブページ上には表示されませんが、DOM ツリーにおいては「コメントノード」として存在します。よって JavaScript からアクセスするといったことは可能です。

なお、コメントの先頭文字として `>` を記述すること（先頭ではなく、その前に空白文字を含む他の文字列があれば記述可能です）、およびコメントを入れ子にすることは構文上エラーになりますので注意しましょう。 

<!--
  これは正しいコメントの記述です。
  <a href="https://burnworks.com/">バーンワークス株式会社</a>
-->

<!-->これは間違ったコメントの記述です。先頭に > を記述してはいけません。-->
<!-- このように <!-- コメントを入れ子にする --> こともできません -->

属性

HTML の開始タグには「属性」を付与することができます。最初に挙げた a 要素の記述例の中で href="～" という記述がありますが、この部分が属性です。属性は要素に対して様々な情報を付加することができます。

属性の記述ルール

属性は、「属性名」と「属性値」の 2 つの組み合わせからなり、それぞれを = で繋いで記述するのが基本的な記述ルールです。a 要素の記述例でいえば、href が属性名、 https://burnworks.com/ が属性値になります。また、原則として属性値は " （ダブルクォーテーション）、もしくは ' （シングルクォーテーション）で括る必要があります。

なお、属性値を括るダブルクォーテーションやシングルクォーテーションは一定のルールの下で省略することもできますが、状況によってはセキュリティリスク、例えばクロスサイトスクリプティング（XSS）の原因になる場合もあるなど注意が必要なため、原則として必ず記述することをお薦めします。 

<!-- ダブルクォーテーションを使用した場合 -->
<a href="https://burnworks.com/">バーンワークス株式会社</a>
    
<!-- シングルクォーテーションを使用した場合 -->
<a href='https://burnworks.com/'>バーンワークス株式会社</a>

なお、ダブルクォーテーションで括った属性値の中にダブルクォーテーションが含まれる場合、あるいはシングルクォーテーションで括った属性値の中にシングルクォーテーションが含まれる場合は、下記のように文字参照を用いてエスケープを行わなければなりません。 

<!-- ダブルクォーテーションで括った属性値にダブルクォーテーションを使用した場合 -->
<span title="サイト名は &quot;I'm Legend&quot; です">私のウェブサイト</span>
    
<!-- シングルクォーテーションで括った属性値にシングルクォーテーションを使用した場合 -->
<span title='サイト名は "I&apos;m Legend" です'>私のウェブサイト</span>

1 つの要素に複数の属性を付与することも可能ですが、その場合は各属性の間を ASCII 空白文字（改行を含む）で区切る必要があります。

<a href="https://burnworks.com/" class="link">バーンワークス株式会社</a>

下記のように改行を含んでも構いません。

<a
  href="https://burnworks.com/"
  class="link"
>
  バーンワークス株式会社
</a>

なお、1 つの要素に対して、同じ属性名をもつ属性を複数付けることはできません。また、要素ごとに付与できる属性が決まっている他、一部の属性はすべての要素に対して使用することができるようになっています。このようなすべての要素に使用可能な属性を「グローバル属性」（後述）といいます。

論理属性と列挙属性

属性値に記述できる値の形式は属性ごとに決められており、そのルールに従わなければなりません。また、属性は属性値に任意のテキストを記述できるものと、あらかじめ定められた特定の値しか指定できないもの、さらに属性値がなくても、その属性の記述があるというだけで有効であると判断されるものに大きく分類されます。

論理属性

論理属性（Boolean Attributes）は、属性値に「真（true）」か「偽（false）」のいずれかを指定するものです。ただし、実際に属性値に `true` や `false` と指定するわけではなく、論理属性はその属性が存在、つまり記述されていれば `true`、記述されていなければ `false` として扱われます。

例えば type 属性の値が checkbox、または radio である input 要素に指定可能な checked 属性は論理属性のひとつですが、最も基本的な記述方法としては、属性名と属性値に同じ値を記述します。 

<input type="checkbox" checked="checked" />

ただし、記述を省略するため、下記のような属性値を空にした記述方法も許されています。

<input type="checkbox" checked="" />

また、HTML 構文（後述）においては、下記のように、属性名だけを記述する方法でも問題ありません。

<input type="checkbox" checked />
列挙属性

列挙属性（Enumerated Attribute）は、「事前に定義（列挙）されたいくつかの属性値を持つことが可能な属性」 のことです。そして、この列挙された属性値のことを「キーワード」といいます。

例えば、audio 要素や video 要素に指定可能な preload 属性は列挙属性ですが、指定可能な値として下記が定義されています。

  • none
  • metadata
  • auto

この中のいずれかのみ属性値として記述することが可能で、例えば `none` を指定した場合は下記のようになります。

<audio src="sample.mp4" preload="none" controls>
  <!-- 略 -->
</audio>

preload 属性のようにキーワードがあらかじめ定められている場合の他にも、「数値」「長さ」「URL」「日付や時刻」といった属性値に持つことができる値の形式が指定されている場合もあります。

なお、列挙属性には下記の 2 つの状況も考えられます。

  • 定義されていない属性値、つまり不正な値が指定された場合
  • 属性値が空だった場合

不正な値が指定され、構文エラーだった場合の「フォールバック」、属性値が省略されてしまった場合の「初期値」に関しては属性ごとに異なりますが定められています。

例えば、不正な値が指定された場合はその属性自体を無視、つまり属性が指定されていないものとして扱うが、属性値が空だった場合はあらかじめ定めてある初期値が指定されたものとして扱う場合もありますし、不正な値が指定された場合に対しても初期値が設定されている属性などもあります。本書では各属性の説明部分で解説されていますので確認してみてください。

HTML 構文と XML 構文

HTML 仕様では、HTML のルールに従って記述した「HTML 構文」と、XML のルールに従って記述した「XML 構文」のどちらの記述方法も選択可能になっています。

HTML 文書が text/html MIME タイプで送信される場合、ブラウザはその文書が HTML 構文で記述されたものとして扱います。一方、application/xhtml+xml MIME タイプで送信された場合は、その文書は XML 構文で記述されたものとして扱われ、XML パーサによって処理されます。よって XML のルールに則った記述が必要になります。

例えば HTML 構文ではタグ名や属性名を大文字で書いても小文字で書いても区別されずに扱われますが（すべて小文字に変換して解釈されます）、XML 構文ではタグ名や属性値の大文字、小文字は厳格に区別されるため必ず小文字で書かなければなりません。また XML 構文では終了タグの省略は許されず、属性のみの記述もエラーとなります。 

<!-- XML構文においては空要素を必ず閉じる必要があります。この記述はHTML構文でも許されています。 -->
<br />

<!-- XML構文においては空要素に終了タグを書いて閉じることもできます。HTML構文では許されません。 -->
<br></br>

空要素

要素の中には終了タグを持たない、「空要素」と呼ばれる要素があります。代表的な例としては、下記の要素などが挙げられます。

  • link 要素
  • meta 要素
  • br 要素
  • wbr 要素
  • img 要素
  • hr 要素
  • input 要素

「HTML 構文と XML 構文」セクションで解説したとおり、HTML 構文において、これら要素に終了タグを書くことはできませんが、下記のようにタグを閉じることは可能です。

<img src="sample.jpg" alt="" />

要素の入れ子

HTML 要素は一定のルールに従って入れ子構造にすることができます。例えば下記の例を見てみましょう。

<body>
  <p>私は<strong>サッカーが好きだ！</strong></p>
</body>

body 要素の中に p 要素があり、さらにその中に、strong 要素が含まれているのがわかると思います。このように、ある要素の中に、別の要素を記述することも可能です。

ただし、入れ子構造にする場合は、正しく入れ子にしなければなりません。例えば下記のように、正しく要素の中に別の要素が入っていない状態になると、それは間違った記述となります。

<!-- 間違った入れ子の記述 -->
<p>私は<strong>サッカーが好きだ！</p></strong>

このような間違った記述は、ブラウザのエラー修正機能により、自動的に修正や補完されて表示されるため、場合によっては画面表示上、何も問題ないかのように見える場合もあります。しかし、HTML の記述方法としてはエラーですので、注意してください。

親要素と子要素、先祖要素と子孫要素

例えば入れ子になった 2 つの HTML 要素があった場合、ある要素の直下に記述された要素を、外側に記述された要素の「子要素」といい、この子要素から見た外側の要素を「親要素」といいます。

多段階の入れ子になっている場合は、最も内側に書かれた要素から見たすぐ外側の要素が「親要素」であり、親要素を含むそれより外側の要素を「先祖要素」といいます。最も外側に書かれた要素からみた直下の子要素を含む、内側の要素を「子孫要素」といいます。

なお、html 要素はすべての要素の最も外側（最上位）に記述される要素ですが、このような要素を「ルート要素」と呼びます。

HTML 仕様では、ある要素が他の要素の子要素になれるのか、あるいはなれないのか、というルールが「コンテンツモデル（Content Model）」定められており、HTML を記述する際はこのルールに従わなければなりません。次の章ではこのコンテンツモデルについて解説していきましょう。

カテゴリとコンテンツモデル

前述の通り、ある要素が他の要素の子要素になれるのか否かを定めたのが「コンテンツモデル」です。一方の「カテゴリ」は、各要素を分類するもので、コンテンツモデルはカテゴリに対して定義されています。

よって、要素のカテゴリと、それぞれのカテゴリに定義されているコンテンツモデルを理解することは、HTML を記述する上で非常に重要なポイントとなります。

カテゴリ

HTML では、類似する特性を持った要素が以下の 7 つのカテゴリに大別され、図のような包含関係にあります。

それぞれの要素は、0 個以上のカテゴリに分類されます。つまり、どこのカテゴリーにも属していない要素や、複数のカテゴリーに属する要素も存在します。また、要素はこれらの主要なカテゴリの他に、3 つのカテゴリにも分類されます。

画像は HTML Living Standard 仕様 （3.2.5.2 Kinds of content） から引用

メタデータコンテンツ

文書内のコンテンツの表示や動作を指定したり、ドキュメントの関連性を指定したり、文書のメタ情報などを指定したりする要素です。

下記の要素がこのカテゴリに分類されます。

  • base 要素
  • link 要素
  • meta 要素
  • noscript 要素
  • script 要素
  • style 要素
  • template 要素
  • title 要素

フローコンテンツ

文書の本文、つまり body 要素内で使われるほとんどの要素が分類されます。テキストも含まれます。

フローコンテンツ

文書の本文、つまり body 要素内で使われるほとんどの要素が分類されます。テキストも含まれます。

セクショニングコンテンツ

ヘッダやフッタなど、特定のセクションの範囲を明示する要素です。通常、見出しを伴って使用されます。

下記の要素がこのカテゴリに分類されます。

  • article 要素
  • aside 要素
  • nav 要素
  • section 要素

ヘディングコンテンツ

セクションの見出しを定義する要素です。また、暗黙的にアウトラインを生成します。

下記の要素がこのカテゴリに分類されます。

  • h1 要素
  • h2 要素
  • h3 要素
  • h4 要素
  • h5 要素
  • h6 要素
  • hgroup 要素

フレージングコンテンツ

文書を構成する段落内のテキストで使用される要素です。テキストも含まれます。

このカテゴリに含まれる要素はすべて、フローコンテンツにも同時に属しています。ただし、フローコンテンツに属する要素がフレージングコンテンツに属するとは限りません。

エンべディッドコンテンツ

文書に他のリソースなどを埋め込むための要素です。

下記の要素がこのカテゴリに分類されます。

  • audio 要素
  • canvas 要素
  • embed 要素
  • iframe 要素
  • img 要素
  • object 要素
  • picture 要素
  • video 要素

インタラクティブコンテンツ

閲覧者が操作することで何らかの機能を提供する要素です。

下記の要素がこのカテゴリに分類されます。

  • a 要素（href 属性を持つ場合）
  • audio 要素（controls 属性を持つ場合）
  • button 要素
  • details 要素
  • embed 要素
  • iframe 要素
  • img 要素（usemap 属性を持つ場合）
  • input 要素（type="hidden" 以外）
  • label 要素
  • select 要素
  • textarea 要素
  • video 要素（controls 属性を持つ場合）

パルパブルコンテンツ

コンテンツモデルがフローコンテンツ、もしくはフレージングコンテンツとなる要素です。hidden 属性が指定されていない内容を最低でも 1 つは持つ必要があります。

スクリプトサポート要素

要素自体は何も表さず、スクリプトを操作するために利用される要素です。

script 要素、及び template 要素がこれに分類されます。

コンテンツモデル

HTML 仕様の各要素に関する説明を読むと、そこにはコンテンツモデルが示されています。例えば、h1 ～ h6 要素のコンテンツモデルは「フレージングコンテンツ」となっています。

つまり、h1 ～ h6 要素は、フレージングコンテンツである a 要素や br 要素、i 要素や img 要素を子要素に持つことはできますが、例えばヘディングコンテンツである h1 ～ h6 要素を子要素に持つことはできないということになります。

また、要素によっては例外の記述があったり、どのカテゴリにも属さない要素に関しては、具体的な要素名でコンテンツモデルが示されている場合もあります。例えば header 要素のコンテンツモデルは「フローコンテンツ」ですが、合わせて「but with no header or footer element descendants.（ただし、header 要素、または footer 要素を子孫に持たない）」と記述されおり例外が定められています。

ul 要素や ol 要素はカテゴリに属さない要素の例で、コンテンツモデルには「Zero or more li and script-supporting elements.（0 個以上の li 要素、またはスクリプトサポート要素）」というように、具体的な要素名によるコンテンツモデルが示されています。

トランスペアレントコンテンツ

一部の要素は、コンテンツモデルに「トランスペアレント」と記述されますが、これは親要素のコンテンツモデルを受け継ぎます。

例えば、親要素に aside 要素を持つ a 要素は、aside 要素のコンテンツモデルがフローコンテンツなので、コンテンツモデルを受け継ぎ、フローコンテンツを子要素に持つことができます。つまり、この a 要素の子要素として、div 要素や p 要素を持つこともできます。

しかし、a 要素が p 要素の子要素である場合、p 要素のコンテンツモデルであるフレージングコンテンツを引き継ぐため、div 要素や p 要素を子要素とすることはできなくなります。

コンテンツモデル「なし」

要素の中には、コンテンツモデルが「なし（Nothing）」となる要素があります。

例えば、空要素のコンテンツモデルは「なし」です。コンテンツモデルが「なし」の要素は、テキスト（空白と改行は除く）も含め、内容をもつことはできません。

また、空要素ではないですが、コンテンツモデルが「なし」の要素として、iframe 要素が挙げられます。つまり、下記のようにテキストを内容に含めることはできません。

<!-- このような記述は構文エラーです -->
<iframe src="sample.html">テキスト</iframe>

一方で、改行を含むことは認められます。

<iframe src="sample.html">
</iframe>

ウェブアクセシビリティ

「アクセシビリティ（Accessibility）」とは、「アクセスのしやすさ」を意味します。ウェブサイトやアプリケーションだけでなく、あらゆる製品や建物、乗り物、サービスなどに対しての「利用しやすさ」、「支障なく利用できる度合い」を指す言葉として使用されます。

日本工業規格「高齢者・障害者等配慮設計指針―情報通信における機器，ソフトウェア及びサービス―第 1 部：共通指針」（JIS X 8341-1：2010）においては、「アクセシビリティ」を下記のように定義しています。

様々な能力をもつ最も幅広い層の人々に対する製品，サービス，環境又は施設（のインタラクティブシステム）のユーザビリティ。

注記 1 アクセシビリティの概念では，能力の多少を問わずすべての利用者を対象とし，障害者と正式に認められた利用者に限定していない。

注記 2 ユーザビリティ指向のアクセシビリティの概念は，すべての利用者の能力の全範囲に十分に注意を払うと同時に利用の特定の状況を考慮し，できるだけ高い水準の有効さ，効率及び満足度を達成することを目指している。

ウェブにおけるアクセシビリティとは、「ウェブコンテンツ」、つまりウェブページやウェブアプリケーションによって提供される情報や機能に対するアクセスのしやすさを表します。

ウェブコンテンツが特定の技術や利用者の能力に依存せず、さまざまな情報端末やソフトウェアから利用できることを目指し、「ウェブアクセシビリティへの配慮」、「ウェブアクセシビリティを向上させる」といった言葉として使用されます。

ここで重要なのは、引用したアクセシビリティの定義における「能力の多少を問わずすべての利用者を対象とし，障害者と正式に認められた利用者に限定していない」という部分です。

アクセシビリティは特定の利用者、例えば障がい者の方などに向けて何か特別なことを行うものではなく、すべての利用者が、等しく利用可能な状態を目指していくことが基本的な概念です。つまり、ウェブコンテンツにおいて、アクセシビリティは最も基本的な要件とも言えるでしょう。

ウェブアクセシビリティのガイドライン

では具体的にどのような方法でウェブコンテンツのアクセシビリティを確保し、その品質を評価すればよいのでしょうか？

そのよりどころとなるガイドラインはいくつか存在しますが、日本国内においては日本工業規格として制定されている、「高齢者・障害者等配慮設計指針 − 情報通信における機器，ソフトウェア及びサービス―第 3 部：ウェブコンテンツ」（JIS X 8341-3）を用いるのが一般的です。

JIS X 8341-3 は 2004 年 6 月に最初の規格（JIS X 8341-3：2004）が制定されましたが、2010 年 8 月には、W3C が策定し、アクセシビリティガイドラインの国際的なデファクトスタンダードである「Web Content Accessibility Guidelines（WCAG）2.0」の内容を取り込む形で改正が行われています（JIS X 8341-3：2010）。

その後、WCAG 2.0 は 2012 年に国際規格「ISO/IEC 40500：2012」となりますが、2016 年 3 月には、JIS X 8341-3 もこの ISO/IEC 40500：2012 の一致規格となるように再度改正されました（JIS X 8341-3：2016）。

これにより、「WCAG 2.0」、「ISO/IEC 40500：2012」、「JIS X 8341-3：2016」 という 3 つのアクセシビリティガイドラインが、お互いに内容が統一された同一の規格として存在しています。つまり、日本国内において JIS X 8341-3:2016 をガイドラインに採用してウェブアクセシビリティに取り組み、評価を行えば、その結果は国際規格とも一致したものとなります。

WCAG は、2018 年 6 月に WCAG 2.0 の改訂版となる WCAG 2.1 が W3C より勧告されました。これは、WCAG 2.0 の時点では十分にカバーできず、対応が不十分だったモバイルデバイスや、タッチデバイスといった現在では広く使われているデバイス、さらに「弱視（ロービジョン）」や「認知・学習障害」への対応強化を目的としたもので、WCAG 2.0 に対して新たに 17 の達成基準を追加したものです。

さらに、WCAG 2.2 の策定作業も進行中で、本紙執筆時点（2022 年 5 月現在）、W3C 草案（Working Draft）として公開され、勧告を目指して作業が進められている状況です。また、勧告に到るにはまだ少し時間がかかるため、現時点では正式なガイドラインとして参照することはできませんが、その後継となる WCAG 3.0（W3C Accessibility Guidelines 3.0）も W3C 草案となっています。

WCAG 3.0 は、この手の仕様書やガイドラインでは難解になりがちな記述を、よりわかりやすく、理解しやすい内容にしていくことを目指すほか、スコアリングの仕組みを取り入れるなど新たな試みがされており、将来的に勧告に到れば、現在よりもウェブアクセシビリティに取り組む敷居が下がるかもしれません。なお、WCAG は一般的な技術仕様と異なり、バージョンが上がっても、それによって古いバージョンが廃止されたり、使えないものとして扱われないという部分に特徴があり、そのことは WCAG 3.0 においても明示されています。

達成基準と適合レベル

ウェブアクセシビリティガイドラインには、「アクセシビリティを確保するために満たして欲しい基準」として「達成基準」が設けられており、WCAG 2.0 や JIS X 8341-3：2016 においては、全部で 61 の達成基準が設けられています。

さらに、この達成基準は、その達成難易度や優先順位によって 3 つの「適合レベル」に分類されており、最も低いレベルの「A」から、「AA」「AAA」が割り当てられています。

WCAG 2.0 や JIS X 8341-3：2016 においては、

  • 適合レベル A： 25 の達成基準
  • 適合レベル AA： 13 の達成基準
  • 適合レベル AAA： 23 の達成基準

に達成基準は分類されており、ウェブサイト制作者は達成したい適合レベルを定めた上で、そのレベルに分類される達成基準を確認しながら要件を満たすようにウェブコンテンツを制作していくという流れになります。例えば適合レベル AA を達成目標に定めた場合は、適合レベル A に分類される 25 項目と、適合レベル AA に分類される 13 項目を合わせた、38 項目の達成基準を満たす必要があります。

前述したとおり、WCAG 2.1 では達成基準が 17 項目増えており、WCAG 2.0 と比べた場合、各適合レベルごとに下記のように達成基準が追加されています。

  • 適合レベル A： 30 の達成基準（+5）
  • 適合レベル AA： 20 の達成基準（+7）
  • 適合レベル AAA： 28 の達成基準（+5）

正しい HTML とは

アクセシビリティの観点からも、HTML を「正しく記述する」ことはとても重要です。

では、「正しい HTML」とはどのようなものでしょうか？あくまで著者の考え方ではありますが、HTML における正しさを大きく分類すると、下記の 2 つに分けられると考えています。

  • 構文的に正しい HTML
  • 意味論的に正しい HTML

構文的に正しい HTML

構文的に正しい HTML とは、つまり HTML 仕様に準じた記述がされているかが重要になります。本書の「HTML の記述ルール」や「コンテンツモデル」で説明したとおり、HTML には仕様で決められたタグや属性の記述方法、ある要素の中に含めることができる要素は何か、要素ごとに使用可能な属性とその値があり、その仕様に則って記述しなければなりません。

例えば、下記のような記述は、要素が正しい入れ子構造になっておらず HTML の構文的に間違っています。

<!-- 間違った入れ子の記述 -->
<p>私は<strong>サッカーが好きだ！</p></strong>

あるいは、要素の入れ子構造は正しくても、コンテンツモデルにおいて正しくない要素の親子関係になっていれば、これも構文的に正しくないと言えるでしょう。

<!--
  コンテンツモデル的に間違っている記述
  ul 要素は直接の子要素として div 要素を持つことはできません
-->
<ul>
  <div>
  <li>リスト項目</li>
  </div>
</ul>

このような構文的な問題点を調べるのは比較的簡単です。例えば、W3C は、HTML の記述が正しいかを検証する（バリデーション）ためのツールをウェブ上に公開しています。

検証したいウェブページの URL を入力する、あるいは HTML ファイルをアップロードするか、HTML をそのまま入力欄にコピー&ペーストしてチェックすることができます。構文的に問題がある場合は、エラー（Error）や警告（Warning）として表示されますので、各項目を確認しながら修正していけば、構文的に正しい HTML にすることができます。

意味論的に正しい HTML

HTML を構文的に正しく記述することは重要ですが、同時に意味論（セマンティクス）的に正しい HTML の記述になっているかにも注目しなければなりません。意味論的に正しい HTML とは、例えば下記のような点から判断できます。

  • 使用している要素の選択は、内容に対して適切か
  • 要素が意味と一致した順序で並べられているか
  • 付与されている属性の値は適切か

具体的な例を挙げてみましょう。

<!-- 意味論的に間違った記述 -->
<div>これは見出しです</div>
<blockquote>この文章は本文です。</blockquote>
<span id="demo">ボタン</span>

上記の HTML は、構文上はエラーとはならず、正しい HTML と言えます。しかし、意味論的には多くの問題があります。

例えば、見出しを表すのであれば、その意味を持つ、h1 ～ h6 の各要素の中から選択するべきですし、blockquote は他所からの引用を表すもので本文に使用するのは不適切です。また、ユーザーに操作させたいボタンであれば、button を用いて実装するのが意味論的には正しいでしょう。 

<h1>これは見出しです</h1>
<p>この文章は本文です。</p>
<button id="demo">ボタン</button>

次の例ではどうでしょうか。この文章も構文的には正しいですし、見出しも h1 ～ h6 から選択していて問題ないように見えます。

<!-- 要素が意味と一致しない順序で並べられている例 -->
<p>この文章は小見出しに対する本文です。</p>
<h2>これは小見出しです</h2>
<h1>これは文書で最も大きな見出しです</h1>

しかし、この状態では要素が意味と一致した順序で並んでいるとは言えないでしょう。

文書の中で最も大きな、つまり文書の主題を示すような見出しがあって、その配下で次にくる小見出し、さらにその小見出しに対する本文というそれぞれのテキストが持つ意味に矛盾しない順序で各要素を並べる必要があります。CSS を用いれば、このような出現順の HTML でも、見た目上は h1 → h2 → p の順に並び変えてしまうことも可能です。見た目上の再現ばかりに気をとられると、このような要素の順序が意味と矛盾してしまう HTML を記述してしまう場合もありますので、注意が必要です。

冒頭、「HTML の役割」の章で、HTML は、タグを用いてテキストをマークアップすることで、意味を明示し、データを構造化するもの と解説しました。意味論的に正しい HTML を記述すれば、ソフトウェアは文章の構造やテキストの意味を判別可能な状態、つまりマシンリーダブルにすることができます。

この状態は、ブラウザが適切な見た目や機能を割り振ったり、支援技術（主に障がいのあるユーザーに対してブラウザだけでは対応できない様々な補助を行うソフトウェア）がユーザーに正しく情報を伝えようとする場合にも重要になります。また、検索エンジンのロボットが文書の内容を判別し、適切なインデックスを付ける場合にも、HTML 文書はマシンリーダブルである必要があります。

ウェブサイト制作者は、構文的、かつ意味論的に正しい HTML を記述するよう心がけましょう。

補足解説

用語解説など、補足記事を下記にまとめています。