HTML5

HTML5
	; HTML5 コードの例
拡張子	(HTML); .html; .htm; (XHTML); .xhtml; .xht; .xml
MIME Type	(HTML); text/html; (XHTML); application/xhtml+xml; application/xml
タイプコード	TEXT; HTML
UTI	public.html
開発者	World Wide Web Consortium, WHATWG
種別	マークアップ言語
	テンプレートを表示

HTML5（エイチティーエムエル・ファイブ）は、 HTML の 5 回目に当たる大幅な改定版である。

HTML5 は WHATWG によって2004年に定められた Web Applications 1.0 に Web Forms 2.0 を取り入れたものが W3C の専門委員会に採用され、W3C より2008年 1月22日にドラフト（草案）が発表され、2014年 10月28日に勧告された^[1]。2016年にHTML 5.1が勧告される予定。

改訂の主要目的のひとつとして人間にも読解可能でコンピューターやディバイス（ウェブブラウザ、構文解析器など）にも矛盾せず読解されるとともに最新のマルチメディアをサポートする言語に向上することである。HTML5 では HTML だけでなく XHTML、Document Object Model の HTML 関係の部分、ECMAScript の API も追加になっている。

表記は HTML 5.1 のようにバージョン表記で小数点以下を含める場合は HTML と 5.1 の間にスペースを入れ、HTML5 のように小数点以下を含めない場合は HTML と 5 の間にスペースを含めない表記法が採用されている^[2]。過去のバージョンについても HTML4 や HTML 4.0 という表記法が使われている。XML の文法で記述する場合、XHTML5 と表記する^[3]^[4]。

概要[編集]

HTML5 は、プロプライエタリなプラグインとして提供されているリッチインターネットアプリケーションのプラットフォーム（JavaFX、Adobe Flash、Microsoft Silverlight 等）を置き換えることを標榜しており、ウェブアプリケーションのプラットフォームとしての機能やマルチメディア要素が実装されている。そのため HTML5 が普及すれば Adobe Flash などのプラグインは不要になるという意見がある^[5]^[6]（後述）。

2008年以降に発表されたウェブブラウザの多くは HTML5 に段階的に対応している。Google Chrome 3.0 以降、Safari 3.1 以降、Firefox 3.5 以降、Opera 10.5、Internet Explorer 9 などであり主に audio要素・video要素・canvas要素への対応が進んでいる（2010年3月現在）。また WebSocket など、当初 HTML5 の一部とされていたものの切り離され別の規格として策定作業が進められているものがある。

広義のHTML5[編集]

厳密には別仕様書として分離されているものの、一般的には、Web Storage・WebSocket・Geolocation API・XMLHttpRequest Level 2などもHTML5に含める場合が多い。

W3C の HTML5 Logo では以下のカテゴリを HTML5 に含めている^[7]。

セマンティックス - HTML5の新タグ、RDFa、マイクロデータ、マイクロフォーマット
オフラインとストレージ - App Cache、Web Storage、Indexed Database API、File API
デバイスアクセス - Geolocation API、マイク・カメラ、アドレス帳・カレンダー、端末の向き
接続性 - WebSocket、Server-Sent Events
マルチメディア - audio要素, video要素
3D、グラフィックス、エフェクト - SVG、canvas要素、WebGL、CSS3 3D
パフォーマンスと統合 - Web Workers、XMLHttpRequest Level 2
CSS3 - WOFFも含む

技術仕様[編集]

エンコーディング[編集]

文書の文字コードの指定は、meta要素におけるcharset属性やBOMでも可能。また、UTF-32を用いたエンコーディングは禁止となる。

文書の構造[編集]

従来のHTMLやXHTML規格は、仕様に書かれた文書構造のルールだけではなく、妥当性検証のためのDTD（およびそのほかのスキーマ）を提供していた。一方、HTML5仕様ではスキーマは提供されない。文書構造のために提供されるのはHTML5仕様に列挙されている各種ルールのみである。

従来の HTML との文法の差異[編集]

HTML5仕様は以下のふたつの構文を採用している。

HTML5仕様書の中で定義されるHTML構文 → 狭義のHTML5
HTML5仕様書からXMLおよびその関連仕様を参照して定めているXHTML構文 → XHTML5と呼ばれる

一方、従来のHTML仕様はSGMLをその構文に採用している。SGMLおよびその関連仕様を参照しており、規格ごとに以下のような差異もある。

SGML規格本体のみを参照しているもの → HTML 4.0以前
SGML規格本体および付属書J、付属書Kを参照しているもの → HTML 4.01や、ISO/IEC 15445など

主にこのような違いのために、HTML5と従来のHTMLとの間には基本的な文法の差異が多い。以下にその代表的な例を挙げる。

SGML宣言[編集]

SGMLを採用していた従来のHTML規格においては、HTML文書は本質的にSGML文書であったため、HTML規格がそれぞれ提供するSGML宣言を文書の先頭に記述することが仕様上許されていた。一方HTML5の仕様では、HTML構文、XHTML構文のいずれを用いた場合でも、文書中にSGML宣言を記述することは許されていない。

文書型宣言およびDTDの扱い[編集]

HTML5仕様においては、文書型宣言はもはやモード指定以外の意味をなさず、その書式は “<!DOCTYPE html>” である。

HTML構文では文書型宣言は必須である。XHTML構文では、HTML5で導入される新しい機能を利用する場合は必須、それ以外の場合は文書型宣言は必須ではない。

従来のHTML規格で提供されていたDTDがなくなり、また文書型宣言の書式が決まっているため、HTML5ではDTDが利用できず、DTDに依存する多くの機能のほとんどが扱えなくなる。例としては、HTML4以前に扱えていた文字実体参照のほとんどがHTML5では扱えなくなる（XMLは文書内部にDTDを書くこともできるが、上記の文書型宣言の決まりを無視する結果となるため、HTML5の仕様の範疇ではない）。

処理命令[編集]

SGMLを採用していた従来のHTML規格では、文書内に処理命令 (Processing instruction) を記述することができた。実際に用いられている例として、DTDを他の処理系で利用するための "architectural support declaration" が存在する (ISO/IEC 15445)。

一方、HTML5仕様におけるHTML構文ではSGMLの処理命令は記述できず、同様の機能も利用できない。XHTML構文であればXMLの処理命令は書ける。

マーク区間[編集]

SGMLを採用していた従来のHTML規格では、マーク区間 (marked section) と呼ばれる仕組みが利用できた。以下に例を挙げる。

<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
<html><head><title>...</title></head>
  <body>
    <p><![INCLUDE[ INCLUDE...マーク区間宣言がない場合と同じように解釈される ]]></p>
    <p><![IGNORE[  IGNORE ...マーク区間の中身を無視される ]]></p>
    <p><![RCDATA[  RCDATA ...マーク区間の中身がRCDATAとして処理される ]]></p>
    <p><![CDATA[   CDATA  ...マーク区間の中身がCDATAとして処理される ]]></p>
    <p><![TEMP[    TEMP   ...マーク区間の中身が一時的なものとして扱われる ]]></p>
  </body>
</html>

上に挙げた例のうち、HTML5仕様で利用できるのはCDATAセクションのみである。

コメントと注釈宣言[編集]

SGMLのコメントは "-- コメント文 --" という形を取り、マーク宣言中の空白文字の出現が許されている場所に任意の回数書くことができる。したがって従来のHTMLでは文書型宣言の中などでもコメントを挿入することが可能で、例えばISO/IEC 15445の文書型宣言は

<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN" --コメント-->

のようにも書ける。一方、HTML5の文書型宣言にはコメントを挿入することはできない。

また、注釈宣言の扱いも従来のHTMLとHTML5では異なる。SGMLを採用していた従来のHTMLでは注釈宣言の中に任意の回数コメントを書くことができるが、HTML5ではHTML構文でもXHTML構文でもこのような書き方は認められていない。また、従来のHTMLでは注釈宣言内の最後のコメントと終了区切り子の間に空白文字を挿入することもできたが、HTML5ではこのような書き方も認められていない。

<!--コメント1-- --コメント2-- --HTML5ではこのような注釈宣言は書けない-->
<!-- この注釈宣言の書き方もHTML5では不可能--  >

終了区切り子の省略[編集]

SGMLをもとにした従来のHTMLでは、タグやマーク宣言の終了区切り子 ">" が、文字列　"<", "</"の直前に存在する場合、その終了区切り子 ">" を省略することが仕様の上では許されていた^[8]。HTML5では終了区切り子の省略はできない。

<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
<html<head<title>Sample</title</head>
<body<p>「閉じないタグ」の例。終了区切り子が省略されている</p</body</html>

空タグ[編集]

SGMLにおける空タグ (empty tag) とは要素型名などが書かれていない空っぽのタグのことである。従来のHTMLでは空タグの存在を許しており、利用できる場所は限られるが、空開始タグ "<>" と空終了タグ "</>" が仕様の上では記述できる。一方、HTML5では空タグを利用することはできない。

簡略終了タグ[編集]

SGML規格には、NET（Null End Tag、簡略終了タグ）と呼ばれる仕組みが存在する。従来のHTMLでのNETは "/" であり、仕様上では、 "文章" という記述を "<p/文章/" と書くような記法が許されていた。

一方のHTML5に簡略終了タグという仕組みはない。ただし、後述する空要素の開始タグを " " などと記述する方法は、（従来のSGMLの立場では）NETを利用したものと解釈することはできる。XMLの空要素タグも、SGMLの立場からはNETおよび付属書KのNESTCを利用した記法であると解釈できる。

空要素のタグ[編集]

従来のSGMLおよびHTMLにおける空要素 (empty element) は、DTDで内容モデルを空 (EMPTY) と決められた要素のことである（例：br要素）^[9]従来のHTMLでは、空要素の終了タグを書くことは許されていない^[10]。よって例えば、br要素のタグを " " や " " のように記述することもできない。

HTML5のHTML構文における空要素 (void elements) は、内容を含むことができない要素のことである^[11]。空要素はその開始タグを ">",　"/>" のいずれかで閉じることができる。例を挙げると、br要素のタグは " " と記述するほかに、XHTML構文のように " " と記述することもできる。ただし空要素の終了タグを書くことはできない^[12]。また、このような記法が許されるのは空要素または外部要素 (foreign element) のタグのみで、その他の要素の開始タグは ">" で閉じねばならない。例えば、HTML5のHTML構文では内容を含まないp要素を "" のように書くことはできない。

XML仕様においては、空要素 (empty elements) は内容を含まない要素のことである^[13]。HTML5のXHTML構文では、空要素は直後に終了タグを伴う開始タグ（例：" "）、あるいは空要素タグ（Empty-Elements。例：" "）のどちらでも表現できる。

ルート要素のタグ[編集]

SGMLをもとにした従来のHTMLでは、ルート要素（ex. HTMLにおけるhtml要素）の開始タグは必ず存在せねばならなかった。

一方、HTML5仕様のHTML構文では、ルート要素の開始タグが省略できる（XHTML構文では不可能）。これはHTML5仕様にDTDなどのスキーマがないこととも大きく関係している。以下にルート要素の開始タグ・終了タグを省略したHTMLの例を載せる。

<!DOCTYPE html>
<head><title>Sample</title></head>
<body><p>これは妥当なHTML文書</p></body>

HTML5 の要素と属性[編集]

nav要素（ナビゲーションのブロック用）や footer要素（作者や著作権の状態を表すまとまり用）や section要素（節）や progress要素（進捗状況）など、特別な意味を持つ要素が追加される。これらは検索エンジンのインデックス作業を容易にする。また、マルチメディアのための audio要素や video要素や2次元ビットマップ画像を描画するための canvas要素も追加される。

HTML 4.01 で非推奨だった font要素や center要素などの CSS によって実現されるべきマークアップはすべて廃止されることとしている。acronym要素も廃止され、abbr要素に一本化される。

lang属性は、XHTML構文における xml:lang属性のように空の文字列をとり得る。

新しい API[編集]

HTML5 ではマークアップだけでなく、API も新しく追加された。たとえば、以下のようなものである。

ビデオやオーディオの再生
保存
オフライン
編集
ドラッグ&ドロップ
戻るボタン
Webページ上のメニュー

エラーの取り扱い[編集]

HTML5 (text/html) 対応ブラウザは間違った構文を柔軟に処理できる。HTML5 は、古いブラウザが新しい HTML5 の構造を安全に無視することが出来るように設計されている。HTML 4.01 とは対照的に、HTML5 は対応したブラウザであれば間違った構文に対して同じ結果となるように、字句解析と構文解析のための詳細な規則を規定している^[14]。

既存技術との競合[編集]

Adobe Flash[編集]

2010年頃までに急速に普及したアップルのiPhoneとiPadがFlash非対応を貫き、スティーブ・ジョブズCEO（当時）がHTML5を支持しFlashを厳しく批判したことが大きな影響を与えた^[15]。iPhoneやiPadにFlash対応を求める声は多かったが^[16]^[17]、特にスマートフォン向けでは徐々にFlashからHTML5への転換が進んでいる。

Flashの開発元であるアドビシステムズは社をあげてFlashを擁護しているが^[18]^[19]^[20]、2011年11月には、モバイルブラウザー用のFlash Playerの開発は止めると発表した^[21]。

補足として、アドビはHTML5の推進にも積極的であり、FlashからHTML5への変換ツールなどをリリースしている。

モバイルアプリケーション[編集]

スマートフォン向けのアプリの多くは、HTML5で開発されたウェブアプリケーションに置き換わるという見方がある。2011年にイギリスのフィナンシャル・タイムズ紙がHTML5による購読アプリを発表し注目を集めた^[22]^[23]。アップルのApp Storeには審査や課金に関する制約が大きく、Androidでは1つのアプリで様々なハードウェア仕様に対応する必要があるが、Webアプリケーションではそれらの制約を受けない。一方で各端末向けの公式アプリストアで配布されるネイティブアプリにもメリットはあるため、2012年当時では置き換えが大きく進んでいるわけではなかったが、2015年には着実に完全置き換えへの作業が進められている。

video要素[編集]

詳細は「video要素」を参照

脚注[編集]

[ヘルプ]

^ HTML5勧告–オープン・ウェブ・プラットフォームの重要なマイルストーンを達成
^ The WHATWG Blog » Blog Archive » Spelling HTML5
^ The WHATWG Blog » Blog Archive » XHTML5 in a nutshell
^ HTML 5 + XML = XHTML 5 | HTML5 Doctor
^ “OperaのCEO：「HTML 5でFlashは不要になりつつある」”. CNET Japan. (2009年5月25日) 2012年5月30日閲覧。
^ “Microsoft がAppleやGoogleと同調”Webの未来はHTML5だ”–IE固有仕様がやっと一掃へ”. TechCrunch Japan. (2010年5月1日) 2012年5月30日閲覧。
^ W3C HTML5 Logo
^ 終了区切り子を省略したタグは「閉じないタグ」と呼ばれた。JIS X 4151 "閉じない開始タグ" "閉じない終了タグ"
^ ただし、単に内容がないだけの要素を空要素と呼ぶこともある。このため、単に内容がない要素との区別のために、SGMLの付属書Kなどでは強制空要素 (mandatorily empty element) という用語も使われる。
^ SGML規格に付属書Kが加わる以前には、空要素の終了タグを記述すること自体が禁止されており。また、付属書Kを参照したHTML 4.01やISO/IEC 15445 でも、HTML4以前と同様に空要素の終了タグを記述してはならないこととなった。またいずれのHTML規格でもNETは "/" だった。
^ 原文HTML5仕様 "Void elements can't have any contents (since there's no end tag, no content can be put between the start tag and the end tag)."
^ 原文HTML5仕様 "Void elements only have a start tag; end tags must not be specified for void elements"
^ 原文XML仕様 "An element with no content is said to be empty."
^ “FAQ – WHATWG Wiki”. WHATWG. 2008年2月25日閲覧。
^ “S・ジョブズ氏、「Flash」に対する考えを公開書簡で明らかに”. CNET Japan. (2010年4月30日) 2012年5月30日閲覧。
^ “iPadユーザーの9割が満足、一番の不満点は「Flash非対応」――米調査”. ITmedia. (2010年5月24日) 2012年5月30日閲覧。
^ “スマートフォンの“Flash対応”ニーズ高く――MMD研究所調べ”. ITmedia. (2010年10月22日) 2012年5月30日閲覧。
^ AdobeのCTOがFlash擁護「HTML5があればFlashは不要」論に反論、ITmedia、2010年 2月2日
^ アドビがFlash Catalystで考えていること HTML5はFlashの脅威か?エバンジェリストに聞いた
^ Flashは比べようもないほどHTML5より優れている
^ “アドビ、モバイル版「Flash Player」の開発を中止”. CNET Japan. (2011年11月10日) 2012年5月30日閲覧。
^ “英Financial TimesがHTML5アプリを公開、Appleのアプリ内課金を回避”. INTERNET Watch. (2011年6月8日) 2012年5月30日閲覧。
^ “Open Mobile Summit 2011 San Francisco：HTML5か、ネイティブアプリか、それが問題だ”. ITmedia. (2011年11月10日) 2012年5月30日閲覧。

外部リンク[編集]

ウィキメディア・コモンズには、HTML5に関連するカテゴリがあります。

HTML5 W3C Recommendation （英語）
- （日本語訳）HTML5
HTML 5.1 W3C Working Draft （英語）
- （日本語訳）HTML 5.1
HTML5 differences from HTML4 （英語）
- （日本語訳）HTML4からのHTML5の差分

この項目は、コンピュータに関連した書きかけの項目です。この項目を加筆・訂正などしてくださる協力者を求めています（PJ:コンピュータ/P:コンピュータ）。

[1] HTML5勧告–オープン・ウェブ・プラットフォームの重要なマイルストーンを達成

[2] The WHATWG Blog » Blog Archive » Spelling HTML5

[3] The WHATWG Blog » Blog Archive » XHTML5 in a nutshell

[4] HTML 5 + XML = XHTML 5 | HTML5 Doctor

[5] “OperaのCEO：「HTML 5でFlashは不要になりつつある」”. CNET Japan. (2009年5月25日) 2012年5月30日閲覧。

[6] “Microsoft がAppleやGoogleと同調”Webの未来はHTML5だ”–IE固有仕様がやっと一掃へ”. TechCrunch Japan. (2010年5月1日) 2012年5月30日閲覧。

[7] W3C HTML5 Logo

[8] 終了区切り子を省略したタグは「閉じないタグ」と呼ばれた。JIS X 4151 "閉じない開始タグ" "閉じない終了タグ"

[9] ただし、単に内容がないだけの要素を空要素と呼ぶこともある。このため、単に内容がない要素との区別のために、SGMLの付属書Kなどでは強制空要素 (mandatorily empty element) という用語も使われる。

[10] SGML規格に付属書Kが加わる以前には、空要素の終了タグを記述すること自体が禁止されており。また、付属書Kを参照したHTML 4.01やISO/IEC 15445 でも、HTML4以前と同様に空要素の終了タグを記述してはならないこととなった。またいずれのHTML規格でもNETは "/" だった。

[11] 原文HTML5仕様 "Void elements can't have any contents (since there's no end tag, no content can be put between the start tag and the end tag)."

[12] 原文HTML5仕様 "Void elements only have a start tag; end tags must not be specified for void elements"

[13] 原文XML仕様 "An element with no content is said to be empty."

[whatfaq-14] “FAQ – WHATWG Wiki”. WHATWG. 2008年2月25日閲覧。

[15] “S・ジョブズ氏、「Flash」に対する考えを公開書簡で明らかに”. CNET Japan. (2010年4月30日) 2012年5月30日閲覧。

[16] “iPadユーザーの9割が満足、一番の不満点は「Flash非対応」――米調査”. ITmedia. (2010年5月24日) 2012年5月30日閲覧。

[17] “スマートフォンの“Flash対応”ニーズ高く――MMD研究所調べ”. ITmedia. (2010年10月22日) 2012年5月30日閲覧。

[18] AdobeのCTOがFlash擁護「HTML5があればFlashは不要」論に反論、ITmedia、2010年 2月2日

[19] アドビがFlash Catalystで考えていること HTML5はFlashの脅威か?エバンジェリストに聞いた

[20] Flashは比べようもないほどHTML5より優れている

[21] “アドビ、モバイル版「Flash Player」の開発を中止”. CNET Japan. (2011年11月10日) 2012年5月30日閲覧。

[22] “英Financial TimesがHTML5アプリを公開、Appleのアプリ内課金を回避”. INTERNET Watch. (2011年6月8日) 2012年5月30日閲覧。

[23] “Open Mobile Summit 2011 San Francisco：HTML5か、ネイティブアプリか、それが問題だ”. ITmedia. (2011年11月10日) 2012年5月30日閲覧。

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]

[14]

[15]

[16]

[17]

[18]

[19]

[20]

[21]

[22]

[23]

HTML5

目次

概要[編集]

広義のHTML5[編集]

技術仕様[編集]

エンコーディング[編集]

文書の構造[編集]

従来の HTML との文法の差異[編集]

SGML宣言[編集]

文書型宣言およびDTDの扱い[編集]

処理命令[編集]

マーク区間[編集]

コメントと注釈宣言[編集]

終了区切り子の省略[編集]

空タグ[編集]

簡略終了タグ[編集]

空要素のタグ[編集]

ルート要素のタグ[編集]

HTML5 の要素と属性[編集]

新しい API[編集]

エラーの取り扱い[編集]

既存技術との競合[編集]

Adobe Flash[編集]

モバイルアプリケーション[編集]

video要素[編集]

脚注[編集]

外部リンク[編集]

案内メニュー

個人用ツール

名前空間

変種

表示

その他

検索

案内

ヘルプ

印刷/書き出し

ツール

他言語版


HTML5 コードの例
拡張子	`(HTML) .html .htm (XHTML) .xhtml .xht .xml`
MIME Type	`(HTML) text/html (XHTML) application/xhtml+xml application/xml`
タイプコード	TEXT HTML
UTI	public.html
開発者	World Wide Web Consortium, WHATWG
種別	マークアップ言語
テンプレートを表示

HTML5

目次

§概要[編集]

§広義のHTML5[編集]

§技術仕様[編集]

§エンコーディング[編集]

§文書の構造[編集]

§従来の HTML との文法の差異[編集]

§SGML宣言[編集]

§文書型宣言およびDTDの扱い[編集]

§処理命令[編集]

§マーク区間[編集]

§コメントと注釈宣言[編集]

§終了区切り子の省略[編集]

§空タグ[編集]

§簡略終了タグ[編集]

§空要素のタグ[編集]

§ルート要素のタグ[編集]

§HTML5 の要素と属性[編集]

§新しい API[編集]

§エラーの取り扱い[編集]

§既存技術との競合[編集]

§Adobe Flash[編集]

§モバイルアプリケーション[編集]

§video要素[編集]

§脚注[編集]

§外部リンク[編集]

案内メニュー

検索

概要[編集]

広義のHTML5[編集]

技術仕様[編集]

エンコーディング[編集]

文書の構造[編集]

従来の HTML との文法の差異[編集]

SGML宣言[編集]

文書型宣言およびDTDの扱い[編集]

処理命令[編集]

マーク区間[編集]

コメントと注釈宣言[編集]

終了区切り子の省略[編集]

空タグ[編集]

簡略終了タグ[編集]

空要素のタグ[編集]

ルート要素のタグ[編集]

HTML5 の要素と属性[編集]

新しい API[編集]

エラーの取り扱い[編集]

既存技術との競合[編集]

Adobe Flash[編集]

モバイルアプリケーション[編集]

video要素[編集]

脚注[編集]

外部リンク[編集]