HTML5
 | この記事は検証可能な参考文献や出典が全く示されていないか、不十分です。 出典を追加して記事の信頼性向上にご協力ください。（2009年11月） |
 | |
 Hyper Text Markup Language version5でのコード記述の例 (この場合、文字コードは、UTF-8が指定され、ブラウザーのページタイトル表示欄には、「HTML5 example」と表示され、本文には、「Text」と書かれる) | |
| 拡張子 | (HTML) |
|---|---|
| MIMEタイプ | (HTML) |
| タイプコード | TEXT Hyper Text Markup Language |
| UTI | public.html |
| 開発者 | World Wide Web Consortium, WHATWG |
| 種別 | マークアップ言語 |
| HTML |
|---|
 |
各種項目
|
HTML5（エイチティーエムエル・ファイブ）は、HyperText Markup Languageの5回目に当たる大幅な改定版である。
HTML5はWeb Hypertext Application Technology Working Groupによって2004年に定められたWeb Applications 1.0にWeb Forms 2.0を取り入れたものがWorld Wide Web Consortiumの専門委員会に採用され、World Wide Web Consortiumより2008年1月22日にドラフト（草案）が発表され、2014年10月28日に HTML5 が勧告され[1]、2016年11月1日に HTML 5.1 が勧告され[2]、2017年12月14日に HTML 5.2 が勧告された[3]。
改訂の主要目的のひとつとして、人間にも読解可能で、尚且つ、コンピュータやデバイス（ウェブブラウザ、構文解析器など）にも矛盾せず読解されるとともに最新のマルチメディアをサポートする言語に向上することである。HTML5ではHTMLだけでなくXHTML、DOMのHTML関係の部分、ECMAScriptのAPIも追加になっている。
表記は、「HTML 5.1」のようにバージョン表記で小数点以下を含める場合はHTMLと5.1の間にスペースを入れ、「HTML5」のように小数点以下を含めない場合はHTMLと5の間にスペースを含めない表記法が採用されている[4]。過去のバージョンについても、「HTML4」や「HTML 4.0」という表記法が使われている。Extensible Markup Languageの文法で記述する場合は、「XHTML5」と表記する[5][6]。
目次
1 概要
1.1 広義のHTML5
1.2 HTML Living Standard
2 技術仕様
2.1 エンコーディング
2.2 文書の構造
2.3 従来のHTMLとの文法の差異
2.3.1 SGML宣言
2.3.2 文書型宣言およびDTDの扱い
2.3.3 処理命令
2.3.4 マーク区間
2.3.5 コメントと注釈宣言
2.3.6 終了区切り子の省略
2.3.7 空タグ
2.3.8 簡略終了タグ
2.3.9 空要素のタグ
2.4 HTML5 の要素と属性
2.5 新しいAPI
2.6 エラーの取り扱い
3 既存技術との競合
3.1 Adobe Flash
3.2 モバイルアプリケーション
4 video要素
5 脚注
6 外部リンク
概要
HTML5は、プロプライエタリなプラグインとして提供されているリッチインターネットアプリケーションのプラットフォーム（JavaFX、Adobe Flash、Microsoft Silverlight 等）を置き換えることを標榜しており、ウェブアプリケーションのプラットフォームとしての機能やマルチメディア要素が実装されている。そのためHTML5が普及すればAdobe Flashなどのプラグインは不要になるという意見がある[7][8]（後述）。
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に含めている[9]。
- セマンティックス - 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 - Webフォントも含む
HTML Living Standard
HTML Living Standardは、WHATWGが策定しているHTMLの標準仕様である。W3Cの勧告するHTML5およびそれ以降（HTML 5.1など）は、HTML Living Standardを基にしている。ただし、W3C側で変更がなされており、両者には差異が生じている[10][11]。ウェブブラウザの開発元では、HTML Living Standardのほうがよく参照されている[12][13]。
技術仕様
エンコーディング
文書の文字コードにはUTF-8を推奨している。文書の文字コードの指定は、meta要素におけるcharset属性で指定する。これとHTTPレスポンスヘッダーのcontent-typeでエンコード宣言が省略された場合はUTF-8が既定となる。またcharset属性を含めたmeta要素は文章先頭から1024バイト以内に記載する必要がある[14]。
文書の構造
従来の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では、タグやマーク宣言の終了区切り子 ">" が、文字列 "<", "</"の直前に存在する場合、その終了区切り子 ">" を省略することが仕様の上では許されていた[15]。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>文章</p>" という記述を "<p/文章/" と書くような記法が許されていた。
一方のHTML5に簡略終了タグという仕組みはない。ただし、後述する空要素の開始タグを "<br />" などと記述する方法は、（従来のSGMLの立場では）NETを利用したものと解釈することはできる。XMLの空要素タグも、SGMLの立場からはNETおよび付属書KのNESTCを利用した記法であると解釈できる。
空要素のタグ
従来のSGMLおよびHTMLにおける空要素 (empty element) は、DTDで内容モデルを空 (EMPTY) と決められた要素のことである（例：br要素）[16]従来のHTMLでは、空要素の終了タグを書くことは許されていない[17]。よって例えば、br要素のタグを "<br />" や "<br></br>" のように記述することもできない。
HTML5のHTML構文における空要素 (void elements) は、内容を含むことができない要素のことである[18]。空要素はその開始タグを ">", "/>" のいずれかで閉じることができる。例を挙げると、br要素のタグは "<br>" と記述するほかに、XHTML構文のように "<br />" と記述することもできる。ただし空要素の終了タグを書くことはできない[19]。また、このような記法が許されるのは空要素または外部要素 (foreign element) のタグのみで、その他の要素の開始タグは ">" で閉じねばならない。例えば、HTML5のHTML構文では内容を含まないp要素を "<p />" のように書くことはできない。
XML仕様においては、空要素 (empty elements) は内容を含まない要素のことである[20]。HTML5のXHTML構文では、空要素は直後に終了タグを伴う開始タグ（例："<br></br>"）、あるいは空要素タグ（Empty-Elements。例："<br />"）のどちらでも表現できる。
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は対応したブラウザであれば間違った構文に対して同じ結果となるように、字句解析と構文解析のための詳細な規則を規定している[21]。
既存技術との競合
Adobe Flash
2010年頃までに急速に普及したアップルのiPhoneとiPadがFlash非対応を貫き、スティーブ・ジョブズCEO（当時）がHTML5を支持しFlashを厳しく批判したことが大きな影響を与えた[22]。iPhoneやiPadにFlash対応を求める声は多かったが[23][24]、特にスマートフォン向けでは徐々にFlashからHTML5への転換が進んでいる。
Flashの開発元であるアドビシステムズは、かつて社をあげてFlashを擁護したが[25][26][27]、2011年11月には、モバイルブラウザー用のFlash Playerの開発中止を発表した[28]。（2013年には担当者でCTOだったケビン・リンチはAppleへ転職[29]）2017年現在、アドビはHTML5の推進に積極的であり、FlashからHTML5への変換ツールなどをリリースしている。
モバイルアプリケーション
スマートフォン向けのアプリの多くは、HTML5で開発されたウェブアプリケーションに置き換わるという見方がある。2011年にイギリスのフィナンシャル・タイムズ紙がHTML5による購読アプリを発表し注目を集めた[30][31]。アップルのApp Storeには審査や課金に関する制約が大きく、Androidでは1つのアプリで様々なハードウェア仕様に対応する必要があるが、Webアプリケーションではそれらの制約を受けない。一方で各端末向けの公式アプリストアで配布されるネイティブアプリにもメリットはあるため、2012年時点では置き換えが大きく進んでいるわけではない。
video要素
脚注
^ HTML5勧告–オープン・ウェブ・プラットフォームの重要なマイルストーンを達成
^ HTML 5.1 is a W3C Recommendation | W3C News
^ HTML 5.2 is done, HTML 5.3 is coming | W3C Blog
^ 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日). http://japan.cnet.com/marketing/story/0,3800080523,20393688,00.htm 2012年5月30日閲覧。
^ “Microsoft がAppleやGoogleと同調”Webの未来はHTML5だ”–IE固有仕様がやっと一掃へ”. TechCrunch Japan. (2010年5月1日). http://jp.techcrunch.com/archives/20100430microsoft-html5/ 2012年5月30日閲覧。
^ W3C HTML5 Logo
^ 渡邉卓 (2017年1月1日). “2017年のWeb標準”. gihyo.jp » WEB+DESIGN STAGE » 一般記事 » 新春特別企画. 技術評論社. 2017年3月25日閲覧。
^ もんど (2016年10月21日). “W3Cのは『欠陥フォーク』！？ HTMLスナップショット2016 ── HTML5 Conference 2016セッションレポート”. HTML5Experts.jp. 2017年3月25日閲覧。
^ Ito, Hayato. “六本木ではたらくソフトウェアエンジニアへのよくある質問とその答え (FAQ) (2015 - 2017) — hayato.io”. 2017年3月25日閲覧。 “私も含めて Chrome の開発者が参考にするのは W3C HTML5仕様ではなく WHATWG の HTML Living Standard です。”
^ 矢倉眞隆 (2015年11月25日). “まだぼやけているHTML5の将来、WHATWGとの二重管理のジレンマ。W3C TPAC 2015 － Publickey”. Publickey. 2017年3月25日閲覧。 “ブラウザベンダーの開発者の多くはフィードバックが仕様にすぐ反映されることからWHATWG HTMLや「Living Standard」と呼ばれるモデルを好んでいます。(中略)そのためマイクロソフトなどはWHATWGの仕様には直接的に関与していません。もっとも、マイクロソフトから「EdgeチームもWHATWG HTML仕様を参照しているので、（WHATWG HTMLに）特許ポリシーがあれば…」という発言があったのも事実です。”
^ 4.2.5.5. Specifying the document’s character encoding
^ 終了区切り子を省略したタグは「閉じないタグ」と呼ばれた。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日). http://japan.cnet.com/news/ent/20412895/ 2012年5月30日閲覧。
^ “iPadユーザーの9割が満足、一番の不満点は「Flash非対応」――米調査”. ITmedia. (2010年5月24日). http://www.itmedia.co.jp/news/articles/1005/24/news018.html 2012年5月30日閲覧。
^ “スマートフォンの“Flash対応”ニーズ高く――MMD研究所調べ”. ITmedia. (2010年10月22日). http://www.itmedia.co.jp/promobile/articles/1010/22/news099.html 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日). http://japan.cnet.com/news/service/35010339/ 2012年5月30日閲覧。
^ Adobe CTO Kevin Lynch Headed to Apple
^ “英Financial TimesがHTML5アプリを公開、Appleのアプリ内課金を回避”. INTERNET Watch. (2011年6月8日). http://internet.watch.impress.co.jp/docs/news/20110608_451358.html 2012年5月30日閲覧。
^ “Open Mobile Summit 2011 San Francisco：HTML5か、ネイティブアプリか、それが問題だ”. ITmedia. (2011年11月10日). http://www.itmedia.co.jp/promobile/articles/1111/10/news018.html 2012年5月30日閲覧。
外部リンク
HTML5 W3C Recommendation （英語）
- （日本語訳）HTML5
HTML 5.1 W3C Recommendation （英語）
- （日本語訳）HTML 5.1
HTML 5.2 W3C Recommendation （英語）
HTML 5.3 （英語）
HTML5 differences from HTML4 （英語）
- （日本語訳）HTML4からのHTML5の差分
HTML Living Standard
- （日本語訳）HTML Living Standard
| ||||||||
| ||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||
カテゴリ
コモンズ
