Clever Geek Handbook

XHTML 2対HTML 5

過去10年と少し前の1997年12月18日。InternetExplorer 4は3か月前にリリースされましたが、Mozilla Foundationはまだ結成されておらず、Firefoxのリリースはまだ先のことです。 XMLHttpRequestはなく、XMLさえありません。 10日以上前のこの日、 HTML 4.0はW3C勧告として公開されました。









これは、最新のWeb標準が開発された基礎になりました。 もちろん、改善がありました。 2000年には、XHTML 1.0が公式の推奨事項として採用され、CSS 2はほとんどのブラウザメーカーによって実装されました。 しかし、単純な名刺から複雑なアプリケーションまで、すべてのサイトが構築されるバックボーンであるWebの基礎は、基本的に変更されていません。









少なくとも今日まで。 しばらくの間、W3Cの状況は変わりつつあるようです-廃止されたHTML 4.xおよびXHTML 1.x標準を置き換えるために設計された2つの競合する仕様が開発中です。 両方のイニシアチブはW3Cの後援の下で機能しますが（常にそうであるとは限りませんでした）、私の意見では、両方とも現在のWebマークアップ言語の選択を大幅に超えています。 これはHTML 5およびXHTML 2.0です。 そして、この記事を読んでいる場合、今後数年のうちに、そのうちの1つ（または両方）で作業する必要があります。













ちょっとした歴史





XHTML 2.0の作業は、2001年に勧告としてXHTML 1.1が公開された直後に始まりました。 XHTML 2.0の最初のドラフトバージョンは2002年に公開されましたが、ドキュメントの大部分は非規範的で不完全な状態でした（そして、今日まで何かが残っています）。 2004年までに、ブラウザ開発者、デザイナー、ウェブ開発者、コンテンツ所有者などの著名な業界リーダーが、XHTML 2.0ワーキンググループの管理に対する不満を高めていました。 W3Cの閉じた性質を思い起こして、彼らは独自の標準を見つけて開発することにしました。









そのため、2004年にWHATWG （Web Hypertext Application Technology Working Group）と呼ばれる独立した連合が形成されました。 グループは、Web Applications 1.0と呼ばれる仕様の作業を開始しました。 2007年4月、W3Cはグループの仕様を検討する提案に賛成票を投じました。 WHATWGメンバーは、HTML開発者のグループとしてW3C内で作業を開始し、プロジェクトの作業を継続しました。このプロジェクトはHTML 5と改名されました。したがって、HTML 5ドラフトは、 すでにプロジェクトのいくつかの重要な段階を見逃していた ）。











XHTML 2.0の概要





XHTML 2.0は完全にXMLベースであり、開発者はSGMLのレガシーと現在のWebマークアップに存在する構文機能を放棄しました。 デフォルトで最小限の機能を備えた「汎用言語」として位置付けられており、CSSまたは他のテクノロジー（XForms、XMLイベントなど）を使用して簡単に拡張できます。 このモジュール式のメカニズムにより、XHTML 2開発チームはドキュメントの一般的なレイアウトに集中できますが、他の人はドキュメントの表示、対話、構築などのメカニズムを開発しています。









XHTML 2ワーキンググループの最優先事項は、ドキュメントのコンテンツと構造をプレゼンテーションからさらに分離することです。 その他の目標は、使いやすさとアクセシビリティの向上、国際化の改善、デバイスの独立性の向上、スクリプトの削減、セマンティックWebとの統合です。 開発者は、以前のバージョン（およびHTML開発チーム）よりも下位互換性に関心がなかったため、HTMLの初期の化身に存在していたいくつかの構文上の手荷物が取り除かれました。 その結果、多くの古いWebマークアップの欠陥を修正する、より簡潔で簡潔な言語になりました。











HTML 5の概要





XHTML 2.0の概念は革新的であることを意図していますが、HTML開発チームは実用的なアプローチを採用し、進化するテクノロジーとしてHTML 5を作成しています。 HTML 5は一歩前進したものの、現在のHTML 4 / XHTML 1標準とほとんど互換性がありますが、HTML 5はHTML 4 / XHTML 1に多くの変更と拡張を提供し、以前の仕様の多くの欠点を指摘しています。









HTML 5仕様は、HTMLのドキュメントマークアップからの脱却と、Webアプリケーションを作成するための言語での実装について言及しています。 このため、Webアプリケーションを開発するためのさまざまなAPIを提供する、より信頼性の高い機能的なクライアント環境を作成することに重点が置かれています。 特に、仕様では、実装はクライアント側の永続データストレージ（キー/値とSQLデータベースの両方）、オーディオとビデオを再生するためのAPI、キャンバス要素を使用した2D描画、ドキュメント間のメッセージ交換を提供する必要があると規定していますサーバーおよびネットワークAPIによって送信されるイベント。









HTML 5は、現在のHTML仕様と互換性のあるSGMLのような構文をサポートします（ただし、SGMLの最も難解な機能の一部はサポートされなくなりました ）。 セカンダリXMLシリアル化も仕様に含まれているため、開発者は適切なXMLドキュメントを使用できます。 SGMLのようなシリアル化を維持することにより、HTML 5開発チームはプラグマティズムと進歩のバランスを取りました：開発者はHTMLシリアル化（HTML 4.xに似ています）またはXMLシリアル化（XHTML 1.xに似ています）を使用してマークアップを選択できます。











類似点





両方の開発グループが多数の同様の機能を提供していることを誰も驚かさないでしょう。 彼らはウェブ開発の有名な「痛点」を指摘し、マークアップ言語の新世代への歓迎すべき追加になるでしょう。











ビュー要素の削除





XHTML 2およびHTML 5では、ドキュメントの表示のみを担当するため、多くの要素が削除されます。 プレゼンテーションはスタイルシートを使用して管理する必要があると考えられています。









XHTML 2およびHTML 5文書には、 basefont



、 big



、 font



、 s



、 strike



、 tt



およびu



要素を含めることはできません。 XHTML 2.0はまた、 small



、 b



、 i



およびhr



要素を削除し、HTML 5はそれらを別の値でオーバーライドします（プレゼンテーションを担当しません）。 XHTML 2.0では、混乱を減らすためにhr



要素がseparator



要素に置き換えられます（ hr



要素は水平方向の仕切りを作成することを目的としていますが、必ずしもこれに使用されるわけではありません）。











ナビゲーションリスト





ナビゲーションリストは、XHTML 2.0とHTML 5の両方で導入されました。XHTML2.0では、新しい nl



（Navigation List） nl



によって定義され nl



。 リスト自体は、リストのタイトルを定義する子label



要素で始まる必要があります。 その後、マークアップリンクに使用される1つ以上のli



要素を使用できます。 また、XHTML 2.0の新機能は、 href



属性を使用して任意の要素からリンクを作成する機能です。 これらのメソッドの組み合わせにより、シンプルで簡単なメニューレイアウトを作成できます。 





 <nl>
     <label>カテゴリ</ label>
     <li href = "/">すべて</ li>
     <li href = "/ news">ニュース</ li>
     <li href = "/ videos">ビデオ</ li>
     <li href = "/ images">画像</ li>
 </ nl>




HTML 5では、この目的のために nav



が導入されました。 残念ながら、 nav



リスト要素ではないため、リンクの論理的な編成のためにli



子を含めることはできません（おそらく新しいイディオムが開発されるでしょう）。 また、HTML 5でリンクを作成するには要素が必要なので、ナビゲーションマークアップはあまり洗練されていません。 





 <nav>
     <h1>カテゴリ</ h1>
     <ul>
         <li> <a href="/">すべて</a> </ li>
         <li> <a href="/news">ニュース</a> </ li>
         <li> <a href="/videos">動画</a> </ li>
         <li> <a href="/images">画像</a> </ li>
     </ ul>
 </ nav>








優れたフォーム





どちらの仕様にも、より少ないスクリプトでより一貫したフォームを作成するための新機能が含まれています。 XHTML 2.0では、HTMLフォーム標準が完全に削除され、より広範なXForms標準が採用されました。 XHTML 2.0開発チームはこの技術を制御せず、仕様でのみ言及しています。 XFormsでの再利用を簡素化するために、収集されたデータはコントロールのマークアップとは別になっています。 これは強力な言語ですが、完全な説明はこの記事の範囲外です。 この技術について少しでも知っていれば、開発速度が大幅に向上すると言うだけで十分です。









HTML 5は使い慣れたHTMLフォームを保持しますが、いくつかのデータ型を追加して開発を簡素化し、ユーザーエクスペリエンスを向上させます。 電子メールアドレス、URL、日付と時刻、数値データ用のいくつかの新しい入力要素タイプが追加されました。 これにより、ブラウザーはより便利なユーザーインターフェイス（たとえば、日付と時刻を選択するためのダイアログ）を作成し、他のアプリケーションと統合し（たとえば、Outlookまたはアドレス帳からアドレスを選択）、サーバーに送信する前にユーザーが入力したデータを確認できます（JavaScriptチェックを短縮します）顧客）。











セマンティックマークアップ





どちらの仕様も、今後のセマンティックWebを対象としており、開発者はより豊富なメタデータをドキュメントに埋め込むことができます。 フォームと同様に、XHTML2開発チームはより高度なテクノロジーを使用しますが、HTML 5開発者はよりシンプルな方法を採用しています。









XHTML 2.0では、メタ情報属性モジュールのいくつかの新しい属性を使用してメタデータを埋め込むことができます。 特に、新しいグローバル属性role



、ドキュメントのコンテキストでこの要素の値を記述することを目的としています。 また、 RDFを引用して、グループが既存の標準を使用するWebページテクノロジーへの埋め込み構造化データも使用します。 このテクノロジーは非常に強力ですが、洗練されています。









HTML開発チームは、 マイクロフォーマットに非常によく似たアプローチを選択しました-さまざまなデータ型を表す定義済みのクラスセットでクラス属性をオーバーロードします。 現在、仕様には、 copyright



、 error



、 example



、 issue



、 note



、 search



およびwarning



7つの予約クラスがありwarning



。 この方法はそれほど信頼できるとは思えないかもしれませんが、これらの要素が異なるブラウザで異なる表示をする可能性は低いです。 クラス名は非常に具体的であるため、開発者が予約クラスを知っているかどうかに関係なく、 copyright



クラスを持つ要素はcopyright



として表示されます。











HTML 5のみ





XHTML 2.0にはないHTML 5機能の一部を以下に説明します。











Webアプリケーション用のAPI





HTML 5には、クライアント側の開発シェルを大幅に強化する多くのAPIが導入されています。 HTML 5は、ドキュメントをマークアップするための単なる言語ではなく、Webアプリケーションの技術スタックです。 これらのAPIの詳細は、現在Web APIワーキンググループによって作成されているため、HTML 5の他の部分と独立して採用することができます。 新しいAPIと関連要素は次のとおりです。













新しいアイテム





HTML 5には、XHTML 2.0では利用できない多くの新機能が導入されています。









さらに、いくつかの新しい要素は、ドキュメントの一部を意味的にマークアウトするのに役立ちます。 それらの名前は、 section



、 article



、 header



、 footer



、およびaside



footer



てaside



ます。 また、新しいdialog



要素は、子要素を使用してメッセージを表示することを目的としていますdt



は送信者の名前、 dd



はメッセージのテキストです。











ユーザーURIのPing





新しいping



属性をa



およびarea



要素で使用しa



、ユーザーを追跡できます。 この属性を使用すると、リンクをクリックしたときに通知する必要があるURIのスペース区切りリストを指定できます。これにより、リダイレクトまたはJavaScriptの使用を回避できます。











XHTML 2.0のみ





XHTML 2.0でのみ利用可能な新機能











任意のアイテムをリンクにすることができます。





XHTML 2.0では、 href



属性はどの要素でも指定できるため、リンクになります。 この変更により、 a



不要になりましたが、保持されています。











任意の要素を画像（または他のリソース）にすることができます





XHML 2.0では、 img



要素が削除されました。 ただし、心配する必要はありません。どの要素も画像になります。 すべての画像には、画像自体と同等の長い説明があるという考え方です。 src



属性を任意の要素に追加することにより、指定されたリソースを読み込み、要素の場所に配置するようブラウザに指示します。 何らかの理由でリソースが利用できない場合、要素のコンテンツが表示されます。 これにより、開発者は要素を相互にネストすることにより、異なるファイル形式とビューを使用して、いくつかの同等のリソースを提供できます。











文字列はbrを置き換えます





改行の挿入に使用される由緒あるbr



要素もXHTML 2.0で削除されました。 それを置き換えるために、新しい要素l



導入されました。 テキストの行を表し、現在のマークアップの規則に従ってbr



後に続くspan



ように機能しspan



。











新しいヘッダー構造





番号付き要素h1



を置き換えるために、新しい要素h



とsection



が導入されました。 これの目的は、ドキュメントの階層構造を伝えることです。 現在の番号付きヘッダーは線形であり、ネストされていません。 親section



section



とh



要素をネストすると、ドキュメントsection



構造が明確になります。











新しいアイテム





XHTML 2開発チームは、より一般的で単純化された言語の作成に焦点を合わせました。 これを考慮して、彼らはさまざまなタイプのコンテンツを表すために多くの特殊な要素を追加することを控えました。 彼らは、新しいrole



属性は、特殊な要素を不要にする豊富なメタデータを埋め込むためのメカニズムを提供すると主張します。 ただし、いくつかの新しい要素が含まれています。













おわりに





両方の提案は有望に見え、一般的なWeb開発の問題を指す多くの新機能が含まれています。 しかし、単一の仕様が公式の推奨事項ではなく、しばらくの間そうなる可能性があります。









開始が遅れているにもかかわらず、HTML 5開発チームは業界から優れたサポートを受けており、推奨プロセスで大きな進歩を遂げました。 彼らの目標は、2010年までに相互作用する多くの実装を備えた完全な仕様を持つことです（これにも関わらず、W3Cコンソーシアムは承認プロセスのいくつかのステップを既にスキップしています）。 ほとんどの主要なブラウザ開発者の産業サポート（唯一の例外はMicrosoft）により、これらの仕様は、安定した状態に達するとすぐに一貫して迅速に実装される可能性があります。









普遍的な欲求は、標準の別の戦争を避けることです。 幸いなことに、両方の言語がXML名前空間をサポートしているため（または、HTML 5でDOCTYPEを切り替えるHTMLシリアル化の場合）、90年代に観察されたドキュメントの同じブラウザー表示依存関係が表示されることはほとんどありません。 標準の戦争を控えれば、Web開発の未来は明るいように見えます。 これらの新しいマークアップ機能とAPIは、Web開発の優れたラッパーを提供します。これにより、デスクトップアプリケーションとWebアプリケーションのギャップが狭められます。















オリジナル：マイクマローン、 XHTML 2 vs. HTML 5

翻訳：ヘリオス











More articles:


All Articles