"HTML5 Differences from HTML4"(HTML4からのHTML5の差分)は、HTML4とHTML5仕様の違いについて説明します。
この節は、公開時点におけるこの文書のステータスについて説明する。他の文書がこの文書に取って代わるかもしれない。現在のW3C発行物のリストとテクニカルレポートの最新版は、W3C technical reports index at http://www.w3.org/TR/で見つけることができる。
これは、HTMLアクティビティの一部であるHTMLワーキンググループによって製作された2014年12月9日のWorking Group Noteである。HTMLワーキンググループは、Working Group Noteとしてこの文書を発行することを意図する。コメントのための適切なフォーラムは、W3C Bugzillaである。(public-html-comments@w3.org、公開アーカイブメーリングリストは、もはやコメントを追跡するために使用されない。)
W3C Working Group Noteとしての公開はW3Cメンバーによる支持を意味するものではない。この文書は草案であり、いつでも更新、他の文書による置き換えや廃止扱いにされうる。進行中の作業以外のものとしてこの文書を引用することは不適切である。
この文書は2004年2月6日のW3C特許ポリシーの下で活動するグループによって作成された。W3Cは、グループの成果物に関するあらゆる開示特許の公開リストを管理する。ここには、特許開示にあたっての指示も含まれている。特許について十分に知識のある人物が、仕様にEssential Claim(s)が認められると判断した場合は、W3C特許ポリシーの第6章に従い情報を開示する必要がある。
この文書は、2005年10月14日のW3Cプロセス文書によって管理される。
この文書は、W3C HTML5仕様を取り扱います。この文書は、W3C HTML5.1仕様、またはWHATWG HTML標準を取り扱いません。[HTML5] [HTML5NIGHTLY] [HTML]
HTMLは1990年代はじめにインターネットに発表されてから、今日まで進化し続けてきました。ある機能は仕様で取り込まれ、またある機能はソフトウェアリリースで取り込まれました。いくつかの点で、実装とウェブ開発の慣習は仕様や標準に落ち着きましたが、一方で、まとまることはありませんでした。
HTML4は、1997年にW3C勧告になりました。HTML4はHTMLの多くの核となる機能の大まかな指針として役立ち続けていますが、ウェブコンテンツとともに、相互運用実装を構築するための十分で重要な情報を提供していません。同じことが、HTML4にXMLシリアライズとして定義するXHTML1や、HTMLとXHTMLの両方にJavaScript APIを定義するDOM Level 2 HTMLにも当てはまります。HTMLはこれらの文書を置き換えます。[DOM2HTML] [HTML4] [XHTML1]
HTML仕様は2004年に開始され、現代的なHTML実装とウェブコンテンツを研究する試みを反映しています。仕様は、
HTMLと呼ばれる、HTML構文またはXML構文で記述される1つの言語仕様を定義します。
相互運用可能な実装を促すために、詳細な処理モデルを定義します。
文書のマークアップを改良します。
ウェブアプリケーションのような、新しい表現に対してマークアップとAPIを取り入れます。
HTML5仕様の"この文書の状態"の節を参照してください。
HTMLは、ユーザーエージェントがコンテンツを処理する方法について下位互換性のある方法で定義されています。ウェブ開発者に対して比較的単純な言語を維持するために、この文書の別の節で説明されるような、たとえばCSSを使用して処理するほうがよい表現に関する要素など、複数の古い要素と属性は含まれていません。
しかし、ユーザーエージェントは常に古い要素と属性をサポートする必要があります。これは、HTML仕様が明確にウェブ開発者(仕様では「著者」と呼ばれます)とユーザーエージェントに対する要件を切り離す理由です。たとえば、これはウェブ開発者がisindex
やplaintext
要素を使用できないことを意味しますが、ユーザーエージェントは、どのようにこれら要素がウェブコンテンツの互換性のために振る舞う必要があるかについて互換性のある方法でそれら要素をサポートする必要があります。
HTMLはウェブ開発者とユーザーエージェントに個別の適合性要件を持っているので、機能を「非推奨」(deprecated)としてマークする必要がなくなりました。
HTMLは、ウェブ上で公開されたHTML4やXHTML1文書とほぼ互換性のある「HTML構文」と呼ばれる構文を定義します。しかし、この構文は処理命令や短縮マークアップなどの難解なSGML機能と互換性がありません。これはほとんどのユーザーエージェントでサポートされていないためです。HTML構文を使用する文書は、text/html
メディアタイプで提供されています。
HTMLはまた、この構文に対して(「エラー処理」を含む)詳細な構文解析規則を定義しています。この構文は、HTML4時代の実装と大部分は互換性をもつものです。ユーザーエージェントは、text/html
メディアタイプを持つリソースに対して、この規則を使用する必要があります。HTML構文に適合する文書の例は、次のようになります:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Example document</title> </head> <body> <p>Example paragraph</p> </body> </html>
HTMLで使用できるもうひとつの構文はXMLです。この構文はXHTML1文書および、その実装と互換性をもちます。この構文を使用する文書は、(たとえばapplication/xhtml+xml
やapplication/xml
のような)XMLメディアタイプで提供される必要があり、要素はXML仕様で定められた規則に従って、http://www.w3.org/1999/xhtml
名前空間に置かれる必要があります。[XML] [XMLNS]
次の例は、HTMLのXML構文に適合する文書の例です。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Example document</title> </head> <body> <p>Example paragraph</p> </body> </html>
HTML構文に対して、ウェブ開発者は文字エンコーディングを宣言する必要があります。次の3つの方法があります:
トランスポートレベルで。たとえば、HTTP Content-Type
ヘッダーを利用します。
ファイルの先頭でUnicode Byte Order Mark (BOM)を利用します。この文字は、使用するエンコーディングのためのシグネチャを提供します。
文書の最初の1024バイト内でエンコーディングを指定するcharset
属性をもつmeta
要素を利用します。たとえば<meta charset="UTF-8">
は、UTF-8エンコーディングを指定するために使用できます。これは<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
のニーズを置き換えますが、この構文は引き続き許可されます。
XML構文に対して、ウェブ開発者は文字エンコーディングを指定するためにXML仕様に記載された規則を使用する必要があります。
HTML構文は、ブラウザーにページを標準モードで表示させるよう、DOCTYPEを必須としています。DOCTYPEは、それ以外の目的を持ちません。[DOCTYPE]
HTML構文に対するDOCTYPE宣言は<!DOCTYPE html>
になります。これは大文字と小文字を区別しません。HTML言語はSGMLベースであり、DTDへの参照を必要としたので、HTMLの以前のバージョンからのDOCTYPEは長くなっていました。これはもはや問題ではなく、DOCTYPEはHTML構文で記述された文書に対して標準モードを有効にするためだけに必要とされています。ブラウザーはすでに<!DOCTYPE html>
を標準モードのトリガーとして解釈しています。
推奨される短いDOCTYPEを生成できないレガシーなマークアップジェネレータをサポートするために、DOCTYPE <!DOCTYPE html SYSTEM "about:legacy-compat">
がHTML構文で許可されます。
HTML構文で、HTML4.0、HTML4.01、XHTML1.0、XHTML1.1の厳密な(Strict)DOCTYPEも許可されています(しかし、お勧めしません)。
XML構文で、どのDOCTYPE宣言を使用してもよく、または完全に省略してもよいです。これは、XMLのメディアタイプをもつ文書は常に標準モードで表示されるためです。
HTML構文は、文書内部でのMathMLやSVGの使用を許可します。math
やsvg
開始タグは、HTMLパーサーに適切な名前空間で要素と属性を置く特殊な挿入モードへ切り替えさせ、大文字と小文字が混在する要素と属性の文字を修正し、そしてXMLのように空要素構文をサポートします。構文は依然として大文字と小文字を区別しないで、属性はHTML要素の場合と同じ構文を許可します。名前空間宣言を省略してもよいです。CDATAセクションはこの挿入モードでサポートされます。
HTML要素や新しいmath
やsvg
要素を使用できるようするために、たとえばmtext
やforeignObject
など、一部のMathMLとSVG要素は、パーサーに「HTMLモード」へ切り替えをさせます。
たとえば、最低限の文法機能の一部を使用するとても単純な文書では、次のようになります:
<!doctype html> <title>SVG in text/html</title> <p> A green circle: <svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg> </p>
触れておく価値のあるHTML構文におけるいくつかの変更点があります:
⟨
と⟩
名前文字参照は現在、それぞれU+2329とU+232A(left/right-pointing angle bracket)の代わりに、U+27E8とU+27E9 (mathematical left/right angle bracket)まで拡張します。
MathML由来のすべての名前文字参照を含む、多くの新しい名前文字参照が追加されています。
(HTML4で"EMPTY"として知られている)空要素は、末尾にスラッシュを持つことができます。
アンパサンド(&
)はHTML4と比べてより多くの場合でエスケープしないままにすることができます。
属性は、少なくとも1つの空白文字で区切る必要があります。
空の値をもつ属性は、たとえ属性が真偽属性でなくても、等号と値を省略した属性名のみを記述することができます。(これは、一般にHTML4は、値が真偽属性に対して省略できると信じられています。その代わりに、HTML4は列挙属性に対して、属性値のみを使用し、属性名を省略できますが、これはブラウザーでサポートされていませんでした。)
値の引用符を省略する属性は、HTML4と比べてより大きな文字セットを使用できます。
HTMLパーサーは、属性値における一切の空白文字の正規化を行いません。たとえば、id
属性で先頭と末尾の空白は無視され(したがって、現在妥当ではありません)、改行文字は文字参照を使用せずに、input
要素のvalue
属性で使用できます。
optgroup
終了タグが省略可能になりました。
colgroup
開始タグは省略可能になり、HTMLパーサーによって推測されます。
より明確にHTML4との違いを説明するために、このセクションは複数のサブセクションに分かれています。
次の要素が、より良い構造のために導入されました:
section
要素は、文書やアプリケーションの一般的なセクションを表します。これは文書構造を表すために、h1
、h2
、h3
、h4
、h5
、h6
要素と共に使用するべきです。
article
要素はブログのエントリや新聞記事など、独立した文書の中身の一部分を表します。
main
要素は、文書またはアプリケーションの主要コンテンツを表します。
aside
要素は、ページのその他の内容とほとんど関係しないものを表します。
header
要素は、導入部やナビゲーションのグループを表します。
footer
要素は、セクションのフッターを表します。フッターは作者に関する情報や著作権情報などを含むことができます。
nav
要素は、文書のナビゲーションを意図するセクションを表します。
figure
は、多くは文書の主なフローから1つのユニットとして参照される、自己完結するフローコンテンツの一部を表します。
<figure> <video src="example.webm" controls></video> <figcaption>Example</figcaption> </figure>
figcaption
要素は、(オプションで)キャプションとして使用できます。
template
は、複製され、スクリプトによって文書に挿入できるHTMLの断片を宣言するために使用できます。
他にも新しい要素があります:
マルチメディアコンテンツのためのvideo
要素とaudio
要素。どちらの要素もAPIが提供され、アプリケーションウェブ開発者がスクリプトを利用し独自のユーザーインターフェイスを開発できます。ただし、ユーザーエージェントにユーザーインターフェイスを動作させる方法もあります。異なるタイプの複数のストリームがあるならば、source
要素がこれらの要素と一緒に利用されます。
embed
要素は、プラグインコンテンツに使われます。
mark
要素は他の文脈との関連性から参照目的でマークされたテキストを表します。
progress
要素は、ダウンロードや負荷の高い処理など、実行中のタスクを表します。
meter
要素は、ディスク容量などの測定値を表します。
time
要素は、日付や時刻を表します。
bdi
要素は、双方向テキストのために、周囲から隔離されるテキストの範囲を表します。
wbr
要素は改行の機会を表します。
canvas
要素はグラフやゲームなど、その場で動的な描画が行われるビットマップグラフィックスに用いられます。
datalist
要素はinput
要素の新しいlist
属性と組み合わせて、コンボボックスを作成するために使用できます。
<input list="browsers"> <datalist id="browsers"> <option value="Safari"> <option value="Internet Explorer"> <option value="Opera"> <option value="Firefox"> </datalist>
keygen
要素は、キーのペアを生成するためのコントロールを表します。
output
要素は、スクリプトによる計算結果など、何らかの出力結果を表します。
input
要素のtype
属性には、以下の新しい値があります:
これらの新しい属性値は、たとえばカレンダーの日付選択やユーザーのアドレスブックとの統合のような、ユーザーインターフェイスをユーザーエージェントが提供し、定義済みのフォーマットでサーバーに送信できます。これらの属性によって、より少ない時間でサーバーに送信する前にユーザーの入力をチェックできます。これにより、ユーザーにより良いエクスペリエンスを提供します。
すでにHTML4の一部である要素に、複数の属性が導入されています:
meta
要素は、既に広くサポートされているcharset
属性があり、ドキュメントの文字エンコーディングを指定するための快適な方法を提供します。
input
(ただしtype
属性がhidden
であるときを除く)、select
、textarea
、button
要素に、新しくautofocus
属性を指定できます。この属性は、ページのロード時にフォームコントロールにフォーカスを宣言する方法を提供します。この機能を使用すると、たとえばユーザーがこの機能を好きではない場合、ユーザーはオフできるので、スクリプトを使用して要素をフォーカスするのに比べてユーザーエクスペリエンスを向上させるでしょう。
input
要素とtextarea
要素に新しくplaceholder
属性を指定できます。この属性は、ユーザーにデータ入力の助言をするためのヒントを表します。
<input type=search name=q placeholder="Enter search phrase..."> <button>Search</button>
<label>Email <input type=email name=email placeholder="john@example.com"></label>
placeholder
属性は、label
要素の代替として使用すべきではありません。
<!-- Do not do this: --> <input type=email name=email placeholder="Email">
input
、output
、select
、textarea
、button
、label
、object
、fieldset
要素に対するform
属性は、フォームに関連するコントロールを可能にします。これらの要素は、form
要素の子孫としてでなく、現在ページのどこにでも置くことができ、form
要素と関連付けできます。
<table> <tr> <th>Key <th>Value <th>Action <tr> <td><form id=1><input name=1-key></form> <td><input form=1 name=1-value> <td><button form=1 name=1-action value=save>✓</button> <button form=1 name=1-action value=delete>✗</button> ... </table>
(type
属性がhidden
、image
またはsubmit
のようなボタンタイプであるときを除く)input
要素とselect
、textarea
要素にrequired
属性を適用できます。この属性は、ユーザーがフォームを送信するために、値を入力する必要があることを示しています。select
要素の場合、最初のoption
要素は値が空のプレースホルダーである必要があります。
<label>Color: <select name=color required> <option value="">Choose one <option>Red <option>Green <option>Blue </select></label>
fieldset
要素は現在、指定されたとき(legend
要素の子孫であるものを除いて)すべての子孫コントロールを無効にするdisabled
属性を許可します。また、スクリプトからのアクセスのために使用できるname
属性を許可します。
input
要素は、制約を指定するための複数の新しい属性があります:autocomplete
、min
、max
、multiple
、pattern
、step
。先に述べたように、datalist
要素と一緒に使用できる新しいlist
属性もあります。また、type=image
を使用するときに、画像の大きさを指定するwidth
属性とheight
属性があります。
input
要素とtextarea
要素は新しいdirname
属性があります。ユーザーが設定する送信する内容と同じ書字方向のコントロールをもたらします。
textarea
要素はまた、maxlength
、minlength
、wrap
という3つの新しい属性を持ちます。これは、入力する最大の長さおよび送信される内容の行送りの挙動をコントロールします。
form
要素は、novalidate
属性を持ちます。この属性により、フォーム検証を無効できます(つまり、フォームをいつでも送信可能にできます)。
input
要素とbutton
要素はformaction
、formenctype
、formmethod
、formnovalidate
、formtarget
を新しい属性として持ちます。属性がある場合、form
要素のaction
、enctype
、method
、novalidate
、target
属性を上書きします。
html
要素はmanifest
と呼ばれる新しい属性を持ちます。この属性は、オフラインウェブアプリケーションのためのAPIと合わせて使用される、アプリケーションキャッシュのマニフェストを指定します。
link
要素は新しくsizes
と呼ばれる属性を持ちます。この属性は、参照されたアイコンのサイズを示すために(たとえばファビコンのために使用でき、rel
属性を通して設定される)icon
の関係と併せて使用でき、従って異なる大きさのアイコンを可能ににします。
iframe
要素は、sandbox
とsrcdoc
と呼ばれる新しい属性を持ちます。これらはたとえばブログのコメントなど、コンテンツのサンドボックス化を可能にします。
object
要素は、外部リソースの安全な埋め込みを可能にするtypemustmatch
という新しい属性を持ちます。
img
要素は、フェッチでCORSを使用するためのcrossorigin
と呼ばれる新たな属性を持ち、それが成功した場合、画像データにcanvas
APIを使用して読み取ることができます。
HTML4由来の複数の属性は現在、すべての要素に適用されます。これはaccesskey
、class
、dir
、id
、lang
、style
、tabindex
、title
属性であり、グローバル属性と呼ばれます。また、XHTML 1.0はxml:space
属性はいくつかの要素にしか許可されませんでしたが、XHTML構文では現在すべての要素に許可されます。
新しいグローバル属性も複数あります:
contenteditable
属性は、その要素が編集可能領域であることを示します。ユーザーはその要素のコンテンツを変更し、マークアップを操作することができます。
ウェブ開発者定義属性、data-*
コレクション。ウェブ開発者は、HTMLの将来のバージョンとの衝突を避けるために、data-
を接頭辞としてウェブ開発者自由に属性を定義できます。これは、ウェブページやアプリケーション自身によって実行されるカスタムデータを格納するために使用することを意図します。この属性は、データを他の当事者(たとえば、ユーザーエージェント)によって実行することを意図しません。
hidden
属性は、要素がないか関連しないことを示します。
spellcheck
属性は、コンテンツがスペルをチェックすることができるかどうかのヒントを与えることができます。
translate
属性は、コンテンツが翻訳されるべきかどうかのヒントを翻訳者に与えます。
HTMLはまた、フォームのonevent
を含む、HTML4からすべてのイベントハンドラをグローバル属性にして、HTMLが新たに定義するイベント用の新規イベントハンドラ属性、たとえば、メディア要素(video
要素とaudio
要素)のためのAPIで使用されるplay
イベント属性、onplay
イベントハンドラ属性などを追加します。仕様は、すべてのイベントの索引を持ちます。
以下の要素は、HTMLで意味をわずかに変更しているものです。これはウェブの使われ方を反映したり、より有用にするため行われています:
b
要素は現在、特別な重要性を与えることや、異なる意見や雰囲気を表現することなしに、実利的な理由から注意を引きつける範囲を表します。たとえば、文書の概要におけるキーワードや、レビューにおける製品名、対話的なテキストベースのソフトウェアにおける実行可能箇所、記事のリード文などです。
blockquote
要素は依然として別のソースから引用されるコンテンツを表しますが、今や注釈および略語だけでなく、footer
またはcite
における引用を含むことができます。
dl
要素は名前と値のグループからなる連想リストを表し、もはや会話文に適さないことが明記されました。
hr
要素は現在、段落レベルの主題の変化を表します。
i
要素は、代わりの声やムードでテキストの範囲を表すか、またはそうでなければ、たとえば分類学上の名称、専門用語、他言語の慣用句、意見、または西洋のテキストで船名などの、テキストの異なる品質を示す方法で通常の文からのオフセットを表します。
label
要素に対して、ブラウザーはラベルからコントロールにもはやフォーカスを移動すべきではありません。ただしこのような動作は、基盤となるプラットフォームのユーザーインターフェイスの標準である場合を除きます。
ユーザーエージェントが文書でより早くにあるscript
要素によって呼び出されるスクリプト言語をサポートしないとき、noscript
要素はもはやレンダリングされると言いません。
s
要素は正確でないか、もう関係のないコンテンツを現在表します。
script
要素は、スクリプトまたはカスタムデータブロックに使用できます。
small
は現在、小さな文字などのサイドコメントを表します。
strong
要素は強調よりもむしろ重要度を現在表します。
u
要素は、明示的にレンダリングされるものの、非テキストの注釈、たとえば中国語のテキストで固有名詞(中国語の固有名詞のマーク)としてテキストを分類する、またはスペルミスとしてテキストを分類するような、はっきりと発音されないテキストの範囲を表します。
複数の属性がさまざまに変更されています。
accesskey
グローバル属性は現在、ユーザーエージェントが複数の文字から選択して、指定できます。
dir
グローバル属性は現在、値auto
を許可します。
img
、iframe
、object
要素のwidth
とheight
属性は、もはやパーセントを含むことができません。これら属性はまた、要素固有のアスペクト比と異なるアスペクト比に画像を引き延ばすために使用することを許可しません。
たとえば、文書のエンコーディングがUTF-8またはUTF-16であるならば、a
要素href
属性など、URLを取るすべての属性は現在、IRIをサポートします。
meta
要素のhttp-equiv
属性は、もはやHTTPレスポンスでHTTPヘッダーを作成するためにHTTPサーバーによって使用されているものだと言われません。代わりに、ユーザーエージェントが使用するプラグマディレクティブであると言われています。
id
グローバル属性は現在、一意であり、空の文字列でなく、空白文字を含まれければ、どんな値でも持つことができます。
lang
グローバル属性は、xml:lang
と同様に、有効な言語識別子に加えて、空の文字列を取ります。
(たとえばonclick
など)イベントハンドラ属性は、常にスクリプト言語としてJavaScriptを使用します。
見栄えを指定するものではないので、li
要素のvalue
属性は、もはや非推奨ではありません。同じことはol
要素のstart
属性とtype
属性に当てはまります。
style
グローバル属性は現在、常にスタイル言語としてCSSを使用します。
tabindex
グローバル属性は現在、要素がフォーカスを受け取ることができるけれども、タブで移動できないことを示す負の値を許可します。
たとえばiframe
と組み合わせて使用するなど、アプリケーションに有用であるのでa
とarea
要素のtarget
属性は、もはや非推奨ではありません。
それぞれ、スクリプト言語がJavaScriptで、スタイル言語がCSSであれば、script
やstyle
要素にtype
属性は不要になります。
img
要素のusemap
属性は、もはやURLを取りませんが、代わりにmap
要素への有効なハッシュ名前参照を取ります。
このセクションにある要素は、ウェブ開発者が使用するべきではないものです。ユーザーエージェントは、まだそれらをサポートする必要がありますし、HTMLにおける様々なセクションでは、どのように扱うかを定義します。たとえば、時代遅れのisindex
要素はパーサーのセクションによって処理されます。
以下の要素の効果は純粋な表現に関するものであって、CSSによってより良い処理がされるため、以下の要素はHTMLに含みません。
以下の要素を使用すると、ユーザービリティーとアクセシビリティーを損なうため、HTMLに含まれません。
以下の要素は頻繁に使用されない、混乱を生じる、または要素の機能が他の要素で扱うことができるために含みません:
isindex
要素はフォームコントロールの利用により置き換えられます。
最後に、noscript
要素はHTML構文でのみ適合します。XML構文で使用できません。これは、視覚的に隠すだけでなく、スクリプトを実行するコンテンツを防ぎ、スタイルシートを適用し、送信可能なフォームコントロールを持ち、リソースを読み込むためなど、HTMLパーサーは、プレーンテキストとしてnoscript
要素の内容を解析しているためです。同じことは、XMLパーサーで不可能です。
HTML4由来のいくつかの属性は、もはやHTMLで許可されません。仕様は、ユーザーエージェントがレガシー文書でそれら属性を処理する方法を定義していますが、ウェブ開発者は、それら属性を使用する許可がされませんし、検証されません。
HTMLは、何が代わりに使用できるかについての助言をします。
さらに、CSSによってより良い処理がされるため、HTMLはHTML4にあった表現を表す属性を一切持ちません。
caption
、iframe
、img
、input
、object
、legend
、table
、hr
、div
、h1
、h2
、h3
、h4
、h5
、h6
、p
、col
、colgroup
、tbody
、td
、tfoot
、th
、thead
、tr
要素のalign
属性。
body
要素のbackground
属性。
table
要素のcellpadding
とcellspacing
属性。
iframe
要素のframeborder
属性。
以下の属性が許可されますが、ウェブ開発者はこれらの使用は勧められず、代わりに代替手段を使用することを強く勧めます。
script
要素のlanguage
属性。これは値に(大文字小文字を区別せずに)"JavaScript
"を指定する必要があります。また、type
属性と矛盾することができません。有用な機能を持たないので、ウェブ開発者はこれを省略できます。
コンテンツモデルは、ある要素の子(または子孫)として許可されているもの―どのように要素を入れ子にできるかを定義するものです。
高レベルで、HTML4は要素の2つの主要なカテゴリ、「インライン」(span
、img
、テキストなど)と「ブロックレベル」(div
、hr
、table
など)を持っていました。一部の要素は、カテゴリーのどちらにも適合しません。
ある要素は「インライン」要素を許可し(たとえばp
など)、ある要素は「ブロックレベル」要素を許可し(たとえばbody
など)、一部の要素はその両方を許可しました(たとえばdiv
など)。その一方である要素はどちらのカテゴリーも許可しませんが、特定の要素のみを許可する(たとえばdl
、table
など)、またはどの子も許可しませんでした(たとえばlink
、img
、hr
など)。
要素自身が特定のカテゴリーにあることと、特定のカテゴリーのコンテンツモデルを持つこととの違いに注意してください。たとえば、p
要素は「ブロックレベル」要素そのものですが、「インライン」のコンテンツモデルを持っています。
コンテンツモデルをさらに混乱させるように、HTML4はStrict(厳格)、Transitional(移行)とFrameset(フレームセット)の種類があり、異なるコンテンツモデルのルールを持っていました。たとえば、Strictで、body
要素は「ブロックレベル」の要素のみを持てましたが、Transitionalでは、「インライン」と「ブロックレベル」の両方を持てました。
依然として物事をさらに混乱させるように、CSSは、視覚整形モデルのための用語「ブロックレベル要素」と「インラインレベル要素」を使用します。これは、CSSの'display'プロパティに関係するもので、HTMLのコンテンツモデルのルールとは何の関係もありません。
CSSとの混乱を減らすために、HTMLはコンテンツモデルのルールの一部として用語「ブロックレベル」または「インライン」を使用しません。しかしながら、コンテンツモデルはHTML4より多くのカテゴリーを持ち、要素はそれらのいずれでもないか、いずれか、またはそれらの複数であってもよいです。
span
要素やdiv
要素などのフローコンテンツ。これは大まかにはHTML4の「ブロックレベル」と「インライン」を一緒にしたようなものです。
h1
要素などのヘディングコンテンツ。
span
要素やimg
要素、テキストなどのフレージングコンテンツ。これは大まかにはHTML4の「インライン」です。フレージングコンテンツはまたフローコンテンツである要素です。
a
要素、button
要素、label
要素などのインタラクティブコンテンツ。インタラクティブコンテンツはネストが許可されません。
HTML4から一目でわかる変更点として、HTMLは、HTML4が「ブロックレベル」要素と呼ばれるもののみを受け入れる要素をもはや一切持ちません。たとえば、body
要素は現在、フローコンテンツを許可します。したがって、これはHTML4 StrictよりむしろHTML4 Transitionalにより近いものです。
さらに変更点を含みます:
address
要素は現在、フローコンテンツを許可しますが、ヘディングコンテンツの子孫、セクショニングコンテンツの子孫、およびheader
、footer
、またはaddress
要素の子孫を許可しません。
noscript
要素は、HTML4で「ブロックレベル」要素でしたが、HTMLではフレージングコンテンツです。
テーブル要素は、テーブルモデルに準拠する必要があります(たとえば2つのセルはオーバーラップできません)。
table
要素は現在、直接の子としてcol
要素を許可していません。ただし、HTMLパーサーはcolgroup
要素を暗に意味するので、この変更はtext/html
コンテンツに影響を及ぼすべきではありません。
th
要素は現在、フローコンテンツを許可しますが、header
、footer
、セクショニングコンテンツ、ヘディングコンテンツの子孫を持ちません。
(要素がインタラクティブコンテンツの子孫を許可しない場合を除いて)a
要素は現在、その親と同じコンテンツモデルを持つことを意味する、透過的なコンテンツモデルを持ちます。これは、要素の親がフローコンテンツを許可するならば、a
要素が現在、たとえばdiv
要素などを含むことができることを意味します。
ins
要素とdel
要素もまた、透明的なコンテンツモデルを持ちます。HTML4は、DTDで表現できなかった同様のルールを本文で持っていました。
map
要素は、透過的なコンテンツモデルを持っています。map
要素の直接の子である必要はないことを意味する、map
要素の祖先があるならば、area
要素はフレージングコンテンツとみなされます。
HTMLは、多くの新しいAPIを導入し、拡張し、いくつかの既存のAPIを変更または廃止しました。
HTMLは、ウェブアプリケーションを製作する上で手助けとなる多数のAPIを提供します。これらのAPIは新しくアプリケーションに導入された要素と一緒に使用できます。
メディア要素(video
およびaudio
)は、再生の制御、複数のメディア要素の同期、および時限テキストトラック(たとえば字幕)のためのAPIを持ちます。
フォーム制約検証のためのAPI(たとえばsetCustomValidity()
メソッド)。
アプリケーションキャッシュをもつ、オフラインウェブアプリケーションを可能にするAPI。
registerProtocolHandler()
とregisterContentHandler()
を使用して、特定のプロトコルまたはメディアタイプに対して自身を登録するウェブアプリケーションを可能にするAPI。
新しいグローバルcontenteditable
属性とともに用いられる編集API。
文書のURLの構成要素を公開し、スクリプトにナビゲート、リダイレクトおよびリロードするためのAPI(Location
インターフェイス)。
セッション履歴を公開し、スクリプトで実際に移動することなく文書のURLを更新できるAPI。その結果、アプリケーションは「Ajaxスタイル」用にフラグメントコンポーネントを乱用する必要がなくなります(History
インターフェイス)。
タイマーベースのコールバックをスケジュールするためのAPI(setTimeout()
およびsetInterval()
)。
文書を印刷するためのAPI(print()
)。
検索プロバイダーを処理するためのAPI(AddSearchProvider()
およびIsSearchProviderInstalled()
)。
DOM Level 2 HTML由来の以下の機能は、さまざまに変更されています。
document.title
は、現在取得時に空白を折りたたみます。
document.domain
は、文書の有効なスクリプトの生成元を変更することができる、設定可能にされます。
document.open()
は現在、文書をクリアーする(2個以下の引数とともに呼び出す場合)またはクリアーするかのように振る舞います(3つまたは4つの引数とともに呼び出す場合)。前者の場合、XMLで例外を投げます。
document.close()
、document.write()
およびdocument.writeln()
は、XMLで例外を投げます。後者の2つは現在、可変長引数をサポートします。これは、文書の入力ストリームがまだ解析されている間にテキストを追加する、document.open()
に呼び出しを意味する、または場合によっては完全に無視されます。
document.getElementsByName()
は現在、引数にマッチするname
属性をもつすべてのHTML要素を返します。
HTMLFormElement
上のelements
は現在、button
、fieldset
、input
、keygen
、object
、output
、select
およびtextarea
要素のHTMLFormControlsCollection
を返します。length
は、elements
におけるノードの数を返します。
HTMLSelectElement
のadd()
も現在、第2引数の整数を受け入れます。
HTMLSelectElement
のremove()
は現在、引数が範囲外にある場合にコレクションの最初の要素を削除します。
Document
への拡張DOMLevel 2 HTMLは、Document
から継承し、文書のHTML固有のメンバーを提供するHTMLDocument
インターフェイスを持っていました。HTMLは、Document
インターフェイスにこれらのメンバーを移動しており、多くの方法で拡張しました。すべての文書は、Document
インターフェイスを使用するので、HTML固有のメンバーは、すべての文書で使用可能です。その結果、たとえばSVG文書などでも同様に使用できます。また、複数の新しいメンバを持ちます:
リソースメタデータ管理を支援するlocation
、lastModified
およびreadyState
。
DOMツリーのさまざまな部分にアクセスするためのdir
、head
、embeds
、plugins
、scripts
およびおよび一般名ゲッター。
どの要素に現在フォーカスされている、またはDocument
がフォーカスを持つかをどうかを調べるためのactiveElement
およびhasFocus
。
編集APIのためのdesignMode
、execCommand()
、queryCommandEnabled()
、queryCommandIndeterm()
、queryCommandState()
、queryCommandSupported()
、queryCommandValue()
。
すべてのイベントハンドラIDL属性。また、onreadystatechange
は、Document
でのみ使用可能な特別なイベントハンドラIDL属性です。
window.HTMLDocument
は現在、Document
インターフェイスオブジェクトを返すので、HTMLDocument
のプロトタイプを変更した既存のスクリプトは、動作を継続する必要があります。
HTMLElement
の拡張HTMLElement
インターフェイスもまた、HTMLで複数の拡張されています:
translate
、hidden
、tabIndex
、accessKey
、contentEditable
、spellcheck
およびstyle
は、コンテンツ属性を反映します。
dataset
は、キャメルケースプロパティとして公開されるdata-*
属性を扱うための便利な機能です。たとえば、elm.dataset.fooBar = 'test'
はelm
上のdata-foo-bar
コンテンツ属性を設定します。
click()
、focus()
およびblur()
は、スクリプトにクリックおよびフォーカス移動をシミュレートすることを可能にします。
accessKeyLabel
は、ウェブ開発者がaccesskey
属性に影響を与えることができる、要素に対してユーザーエージェントが割り当てているショートカットキーを提供します。
要素が編集可能な場合にisContentEditable
はtrueを返します。
すべてのイベントハンドラIDL属性。
一部のメンバーは、以前はHTMLElement
で定義されていましたが、DOM標準でElement
インターフェイスに移動されます:[DOM]
id
は、iid
コンテンツ属性を反映します。
className
は、class
コンテンツ属性を反映します。
classList
は、className
のための便利なアクセサーです。このアクセサーが返すオブジェクトは、要素のクラスを操作するためのメソッド(contains()
、add()
、remove()
およびtoggle()
)を公開します。
getElementsByClassName()
は、指定されたクラスをもつ要素のリストを返します。
DOM Level 2 HTMLのいくつかのインターフェイスが拡張されています。
HTMLOptionsCollection
は現在、レガシーコーラー、セッタークリエーター、メンバーadd()
、remove()
およびselectedIndex
を持ちます。
HTMLLinkElement
およびHTMLStyleElement
は現在、CSSOMからLinkStyle
インターフェイスを実装します。[CSSOM]
HTMLFormElement
は現在、名前付けゲッターおよびインデックス付きゲッターだけでなく、checkValidity()
メソッドを持ちます。
HTMLSelectElement
は現在、ゲッター、item()
およびnamedItem()
メソッド、セッタークリエーター、selectedOptions
およびlabels
IDL属性ラベル、フォーム制約の検証APIに対するメンバー:willValidate
、validity
、validationMessage
、checkValidity()
、reportValidity()
およびsetCustomValidity()
を持ちます。
HTMLOptionElement
は現在、コンストラクターOption
を持ちます。
HTMLInputElement
は現在、files
、height
、indeterminate
、list
、valueAsDate
、valueAsNumber
、width
、stepUp()
、stepDown()
メンバー、フォーム制約検証APIメンバー、labels
、およびテキストフィールド選択APIに対するメンバー:selectionStart
、selectionEnd
、selectionDirection
、setSelectionRange()
およびsetRangeText()
を持ちます。
HTMLTextAreaElement
は現在、メンバーtextLength
、フォーム制約検証APIメンバー、labels
およびテキストフィールド選択APIメンバーを持ちます。
HTMLButtonElement
は現在、フォーム制約検証APIメンバーおよびlabels
を持ちます。
HTMLLabelElement
は現在、メンバーcontrol
を持ちます。
HTMLFieldSetElement
は現在、メンバーtype
、elements
、フォーム制約検証APIのメンバーを持ちます。
HTMLAnchorElement
は現在、メンバーrelList
、text
を持ち、メンバーhref
、origin
、protocol
、username
、password
、host
、hostname
、port
、pathname
、search
、searchParams
およびhash
を持つURLUtils
を実装します。HTMLLinkElement
およびHTMLAreaElement
はまた、relList
IDL属性を持ちます。HTMLAreaElement
はまた、URLUtils
インターフェイスを実装します。
HTMLImageElement
は現在、コントラクターImage
、およびメンバーnaturalWidth
、naturalHeight
およびcomplete
を持ちます。
HTMLObjectElement
は現在、メンバーcontentWindow
、フォーム制約検証APIメンバーおよびレガシーコーラーを持ちます。
HTMLMapElement
は現在、メンバーimages
を持ちます。
HTMLTableElement
は現在、メンバーcreateTBody()
を持ちます。
HTMLIFrameElement
は現在、メンバーcontentWindow
を持ちます。
さらに、ほとんどの新しいコンテンツもまた、要素のインターフェイスで対応するIDL属性を持ちます。たとえば、sizes
コンテンツ属性を反映するHTMLLinkElement
のsizes
IDL属性など。
一部のAPIは現在、完全に削除されるか、旧式としてマークされるかのいずれかです。
すべてのIDL属性は、それ自身が旧式であるコンテンツ属性を反映し、現在もまた旧式です。たとえば、旧式のbgcolor
コンテンツ属性を反映するHTMLBodyElement
上のbgColor
IDL属性は、現在旧式です。
要素が旧式であるので、次のインターフェイスは旧式とマークされます:HTMLAppletElement
、HTMLFrameSetElement
、HTMLFrameElement
、HTMLDirectoryElement
およびHTMLFontElement
。
HTMLパーサが他の要素にisindex
タグを拡張しているためにHTMLIsIndexElementインターフェイスが完全に削除されます。要素は効果がありませんので、HTMLIsIndexElement
インターフェイスと一緒に削除されます。要素が影響を持たないので、HTMLBaseFontElement
インターフェイスも削除されます。
(現在Document
に移動した)HTMLDocument
インターフェイスの以下のメンバーは現在旧式です:anchors
およびapplets
。
The editors would like to thank Ben Millard, Bruce Lawson, Cameron McCormack, Charles McCathieNevile, Dan Connolly, David Håsäther, Dennis German, Frank Ellermann, Frank Palinkas, 羽田野太巳 (Futomi Hatano), Gordon P. Hemsley, Henri Sivonen, James Graham, Jens O. Meiert, Jeremy Keith, Jukka K. Korpela, Jürgen Jeka, Krijn Hoetmer, Leif Halvard Silli, Maciej Stachowiak, Mallory van Achterberg, Marcos Caceres, Mark Pilgrim, Martijn Wargers, Martin Leese, Martyn Haigh, Masataka Yakura, Michael Smith, Mike Taylor, Ms2ger, Olivier Gendrin, Øistein E. Andersen, Philip Jägenstedt, Philip Taylor, Randy Peterman, Robin Berjon, Steve Faulkner, Toby Inkster, Xaxio Brandish, Yngve Spjeld Landro and Zhong Yu for their contributions to this document as well as to all the people who have contributed to HTML over the years for improving the Web!