HTML5のしくみ

ハイパーテキストマークアップ言語（HTML）は、1990年代初頭からWebのコアテクノロジーでした。Tim Berners-Leeは、電子文書をエンコードするためのシンプルで効果的な方法として、1989年にHTMLを作成しました。実際、Webブラウザーの本来の目的は、そのようなドキュメントのリーダーとして機能することでした。20年後、ブラウザ自体がオンラインメディアの世界へのポータルになりました。そのため、HTML5は単なるHTMLリビジョンではなく、Webページの動作に関する包括的な標準です。

HTML5の独自性をよりよく理解するために、時計を少し戻しましょう。1994年当時、HTMLはまだ最初の改訂版であり、MosaicとNetscapeがブラウザ市場を支配し、ほとんどの人はWorldWideWebと呼ばれるこの新しいものをまだ体験していませんでした。その年、HTMLクリエーターのBerners-Leeは、World Wide Web Consortium（W3C）として知られる新しく設立されたWeb標準グループを率いました。

W3Cは今日、尊敬されている標準機関ですが、1990年代のブラウザ市場の商用プレーヤーは、これらの標準をほとんど無視し、独自の道を切り開いていました。1995年までに、W3CはHTML標準の2番目のリビジョンを公開し、Webの新参者であるMicrosoftはInternet Explorer（IE）ブラウザーで着実に成長していました。Microsoftは標準をほとんど無視し、IEが支配し始めている間、Netscapeは立派な市場シェアを維持するのに苦労しました[出典：Harris]。

これらの初期のブラウザ戦争の間、Web開発者は、主要なブラウザの新しいリリースごとに、またあまり使用されていないOperaおよびAppleSafariブラウザと互換性を保つようにサイトを維持するという課題に直面しました。W3Cは1997年にHTML3.2を公開し、続いて1998年にHTML 4を公開しましたが、標準に従うことは、ブラウザ固有の機能に追いつくことほど重要ではないように思われました。これは、コミュニティ主導のMozillaFoundationがトレンドを打ち破った2003年まで続きました。最初のMozillaブラウザのリリース後、 2004年にFirefoxブラウザがリリースされた後、MozillaはすぐにIEの優位性をハッキングしました。さらに、これらの新しいブラウザは、実際には既存のW3C標準に準拠しています。

MozillaのFirefoxは古いHTML4標準を使用して成長を続けていましたが、Mozillaは2004年にAppleとOperaに加わり、Web Hypertext Application Technology Working Group（WHATWG）と呼ばれるグループを結成しました。WHATWGの目標は、HTML開発を存続させることです。W3Cは当初は躊躇していましたが、2006年にHTMLの復活に加わりました。WHATWGとW3Cは、HTMLとXHTMLの既存の仕様を組み合わせ、さらに開発して新しいHTML5仕様を作成しました。その仕様は現在、W3Cによって維持および公開されています[出典：W3C、WHATWG ]。

この記事では、この新しいHTML5テクノロジーについて説明します。HTML5に組み込まれたXHTMLやその他のテクノロジーを見て、HTML5を使用して魅力的で標準に準拠したWebコンテンツを作成する方法の基本的なポイントについて説明します。また、人々がWeb上でHTML5を使用しているいくつかのエキサイティングな方法も確認します。HTML5の目標と、それが単なるHTML以上のものである理由を見てみましょう。

1. HTML5はHTMLを超えて
2. HTML5 Foundation Technologies
3. 基本的なHTMLコンテンツ
4. フォーム
5. セマンティック要素
6. メディア要素とフラッシュの競争
7. キャンバス
8. CSS3でルックを作成する
9. 中心的なコンポーネントとしてのJavaScript
10. Webアプリケーションテクノロジー
11. 画期的な概念実証

HTML自体は、静的なドキュメント、つまりテキストやリンクなどの表示に重点を置いています。HTML 4を通じて、HTML標準は、この目的を達成するために使用されたHTML構文と同じものでした。HTML5標準には、Webページがブラウザーにロードされたときに、その背後にあるコンテンツ、スタイル、およびアプリケーションインターフェイスを記述するというはるかに広い目標があります。より具体的には、HTML5は、Webページがコンピューターのメモリにロードしたすべての要素と対話するための単一の構文を確立します。

先に進む前に、「HTML5」という用語について明確にする必要がある潜在的な混乱のポイントがあります。HTML5と呼ばれるマークアップ言語自体の新しいバージョンがあります。ただし、その言語は、HTML5という名前を共有するより広範な標準の一部にすぎません。この記事では、HTML5言語が中心となるHTML5標準のすべてのコンポーネントについて説明します。

その違いを念頭に置いて、ブラウザは、長年のHTML 4言語ではなく、新しいHTML5標準に従って記述されたページをどのようにロードしますか？結局のところ、私たちは通常、背後にあるHTMLを気にせずに、ブラウザに依存してWebページをロードします。答えは簡単です。ブラウザ自体がHTML5をサポートできる限り、HTMLリビジョンを区別することなく、ブラウザでスローしたものをすべて処理できます。

この魔法を実現するために、HTML5標準は、共通の目標に向けて連携して機能する複数のテクノロジーの新しいバージョンを統合します。これらの目標には、次のものが含まれます。

HTML5はHTMLマークアップ自体以上のものであることがわかったので、標準の基盤技術を調べてみましょう。

マークアップ言語は、一連のタグを使用してファイル内の要素をマークします。マークアップは、それらの要素が何であるか、およびそれらをどのように使用するかを定義するある種のモデルに依存しています。HTMLは常にドキュメントのエンコードに関するものであるため、ドキュメントオブジェクトモデル（DOM）と呼ばれるものに依存しています。DOMは、Webブラウザアプリケーション自体に組み込まれています。したがって、マークアップ言語は、すでに理解しているモデルに基づいてブラウザに指示を与える方法にすぎません。

DOMとHTMLの関係をよりよく理解するために、DOMをゴム印の箱と考えてください。各スタンプは、DOM内の異なる要素です。HTMLで書かれた各ページは、スタンプから作成された一連のインプリントであり、独自のカスタムコンテンツが入力されています。Webブラウザは、そのボックス内のスタンプから作成されたものをすべて表示できます。

技術的に言えば、DOMは、HTMLまたはXMLドキュメントを処理するためのプラットフォームに依存しない方法を提供するアプリケーションプログラミングインターフェイス（API）です。（Extensible Markup Language（XML）はHTMLに似ていますが、プログラマーはドキュメントで使用できる要素のカスタマイズされたセットを追加できます。）HTML5標準では、DOM5HTMLと呼ばれるDOMが必要です。HTML5の成長に備えて、Chrome、Firefox、IE、Safari、Operaブラウザの最新バージョンはすべてDOM5HTMLでページを処理できます。

HTML5のもう1つの重要な基盤は、関連する多目的インターネットメール拡張機能（MIME）タイプです。MIMEは、イン​​ターネット対応ソフトウェアに処理しようとしているコンテンツの種類を警告するためのインターネット技術特別調査委員会（IETF）の標準です。これは通常、HTMLドキュメントやMP3オーディオファイルなどの特定の種類のファイルに対応します。

Web開発者は、WebページをエンコードするときにMIMEタイプを指定します。これにより、ブラウザはタイプに応じて対応するファイルを適切にロードするように求められます。DOM5HTMLを結合して新しいHTML5標準の基礎を形成する2つのMIMEタイプがあります。HTMLMIMEタイプ（text / html）とXML MIMEタイプ（application / xhtml + xml）です。HTML5には、これら両方のMIMEタイプの構文の更新が含まれています。

つまり、HTML5標準の基本的なテクノロジは、DOM5 HTMLと、HTMLおよびXML用のHTML5互換のMIMEタイプです。次に、HTML5を使用してWebページを作成する方法に移りましょう。

少なくとも、HTML5には基本的なHTML構文のバージョン5が含まれています。このページのサイドバーにあるサンプルコードは、このHTMLコードが基本的なWebページでどのように見えるかを示しています。Webを閲覧しているときは、ブラウザの[ソースの表示]または同様のオプションを使用して、現在表示しているページを作成するためにロードされたHTML（およびその他のコード）を確認します。この例に示されているすべてのコードは、HTML 4との下位互換性もあります。つまり、HTML5で利用できる新しい追加機能はありません。

すべてのWebページに存在するわけではありませんが、例に示すように、ドキュメントタイプ（doctype）宣言でHTMLファイルを開始することをお勧めします。これにより、ブラウザがドキュメントを解釈するときに標準のHTMLを期待する必要があることが確認されます。一部の開発者は、ドキュメントタイプ定義（DTD）ファイルを使用するHTML標準の拡張機能に依存しています。その場合、開発者はこのDoctypeの一部としてDTDの場所を指定します。

doctypeの他に、例の残りのコードは標準のHTML構文です。この構文に慣れていない場合は、Webページのしくみに関する記事を参照してください。

では、HTML5のこれらの基本的な要素の新機能は何ですか？これがリストです。次のページでそれぞれを詳しく見ていきます。

フォーム（ユーザーが名前や住所などの特定のデータを入力できるWebサイトのセクション）は、HTMLで利用できる最も初期の要素の一部でしたが、HTML5より前の多くの便利な機能がありませんでした。これを補うために、サードパーティの開発者は、基本的なHTMLフォームをほとんど時代遅れに見えるようにするWebフォームソフトウェアを作成しました。HTML5は、フォームに新しい命を吹き込みましたが、新しいフォーム要素、入力タイプ、および既存の要素の属性を備えています。

古い構文と新しい構文を区別せずに、HTML5を使用してWebページのフォームを作成するための全体的なアプローチを調べてみましょう。開始するためのいくつかの推奨手順は次のとおりです。

フォーム要素とその属性の完全なリストについては、最新のHTML5リファレンスガイドを確認してください。また、一部のフォームフィールドのサポートは、Webブラウザによって異なることに注意してください。Webサイトでサポートするブラウザの種類ごとにフォームをテストしてください。

HTMLフォーム要素はバージョン5でより多くの機能を備えていますが、次の要素タイプはHTML5ではまったく新しいものです。

HTML5のセマンティック要素は、その名前が示すように、特定のコンテンツの意味を参照する要素です。今日のほとんどのWebサイトでは、1つのページにいくつかの異なるタイプのコンテンツが含まれているため、タグを単独で使用するだけでは不十分です。Web開発者は、各タイプのコンテンツの外観または動作について個別のルールを適用する必要があります。

セマンティック要素がない場合、Web開発者は