HTML 5：特に興味深い5つのこと

HTML 5は、World Wide Webに投稿するコンテンツを作成する主な方法であるハイパーテキストマークアップ言語の今後のアップデートです。 HTML 4.01で1999年にHTML開発が停止し、それ以降、現在のHTML仕様が今日の要件を満たさなくなるようにWebコンテンツが変更されました。



HTML 5は、HTMLの相互運用性を向上させ、リッチで混在したWebコンテンツの増大する要求を満たすことを目的としています。 HTML 5は、第4バージョンの欠点に対処することも目的としています。 この記事では、HTML 5の5つの興味深い新機能を取り上げます。



これは、Web開発者およびデザイナーであり、Web開発とデザインに関するブログであるSix Revisionsの著者であるゲストJacob Gubeによる記事です。

ちょっとした歴史

HTML 5の注意散漫な反省は2003年末に始まりました。 World Wide Web Consortium （W3C）は、Webプロトコルと推奨標準を監視する組織であり、Apple、Mozilla Foundation、Opera Softwareの代表者から2004年に結成されたWeb Hypertext Application Technology Working Group （WHATWG）によって開発されたHTML 5ドラフトに関心を示しています。 その結果、2007年にHTML 5仕様を開発するために、 W3C HTMLワーキンググループが結成されました。



開発が進行中で、HTML 5は2012年にW3C勧告候補のステータスに達すると予想されていますが、現在のほとんどのブラウザーはHTML 5仕様を部分的にサポートしています。

新しいエキサイティングな機能

1.コンテンツをより適切に説明できる新しいHTML要素

HTMLの主なタスクは、Webページの構造を記述することです。 たとえば、<p> </ p>要素で囲まれたテキストは、これらの要素間のテキストが段落であることをブラウザに伝えます。











Webページのコンテンツを正確に記述するために、さまざまなWebコンテンツがHTML 4の範囲を超えています。 典型的な例は、ビデオとオーディオのストリーミングです。 ナビゲーションメニューや商標などのWebサイトの一部（通常は見出しにあります）は、ほとんどのWebページに存在します。 さらに重要なことは、現在のHTML仕様に反して、JavaScript、Flash、およびサーバー側の技術の改善が、 リッチインターネットアプリケーション 、レスポンシブ、ユーザー指向、ブラウザーベースのアプリケーションの普及を促進していることです。



多くのHTML要素を追加することにより、HTML 5は、開発者がデータをより正確かつ正確に記述する方法を提供することを目指しています。



例として、現在のHTML仕様に従って、典型的なWebページの構造をどのように記述するかを示します。











このマークアップオプションの問題は、ブラウザの場合、すべての要素が<div>要素であることです。 ブラウザは<div>要素内のすべてを同じ方法で処理します。これは、ブロック間の違いが見られず、コンテンツ、サイドバー、フッターなどのクラスと識別子がサイトごとに異なるためです。



HTML 5では、同じページのレイアウトを異なる方法で説明できます。











このマークアップでは、ブラウザは各部分の目的を知っています。 彼は、ページのメインコンテンツが<article>要素内にあること、Webサイトナビゲーションが<nav>要素内にあることなどを知っています。



実際の使用は、魅力的な外観とより意味的なマークアップで終わるわけではありません。 これらの革新により、マークアップの相互運用性が向上します。 たとえば、検索ボットなどの外部システムは、Webページ上のどのコンテンツがより重要かをより正確に判断できます。 これらのシステムには、ページ上の重要なコンテンツが含まれていない可能性が高いため、これらのシステムでは<nav>および<footer>要素の処理をスキップできます。 その結果、整形式のHTML 5ドキュメントは、検索エンジンがそのコンテンツをよりよく理解できるようにします。



unningな開発者は、Webサイトのグループの<article>セクションのみを収集してデータベースに保存するアプリケーションを作成できます。たとえば、すべての<video>要素を見つけて、ページ上のビデオ全体のリストを生成できます。



視覚障害者のテキストを読むことができるソフトウェアにより、ユーザーはメインコンテンツのセクションにすばやくジャンプできます。 Webページのメインコンテンツを読みたい場合は<article>要素に直接移動でき、別のページに移動したい場合は<nav>要素に直接移動できます。

2. Webフォームの改善された作業

最近では、ウェブサイト上のフォームなしで行うことは困難です。 ブログにコメントを投稿したり、ユーザーアカウントを登録したり、Gmailにメールを送信したりすると、それらに遭遇します。 HTML 5は、 Webフォームの使用方法の再考を含むWebフォーム2.0と呼ばれる仕様を提供します。 Web開発者に、入力フィールドを効率的かつ簡単に管理し、フォームを送信するための多くのオプションと新機能を提供します。



Web Forms 2.0で最も印象的なことの1つは検証です。 現在、開発者はJavaScript（クライアント側）またはPHP（サーバー側）コードを使用して入力を検証する必要があります。 たとえば、多くのWebフォームには必須フィールドが含まれています（たとえば、ユーザー名またはメールフィールド用）。











HTML 4では、そのようなフォームのマークアップは次のようになります。











現在、ユーザー入力を検証するにはスクリプトを使用する必要があります。 この例では、開発者は独自の検証コードを記述（または、以前に作成したコードを使用）して、必要なフィールドが誤って入力されていないこと、または指定された電子メールアドレスが正しく指定されていることを確認する必要があります（通常、これは正規表現で確認して行われます）。



作成者が検証スクリプトなしでページを処理できるようにするために、HTML 5（現在のWeb 2.0仕様）では、「 required 」や「 email 」などの追加属性が提供されます。これらの属性は、フィールドが入力され、電子メールフィールドが正しく入力されているかどうかを自動的にチェックします

3. Webアプリケーション開発を容易にするAPI

HTML 5は、Webアプリケーションの開発を改善することを目的とした新規および既存の要素用のいくつかのAPIを導入し、開発者がWebアプリケーションのマークアップを作成できるという点でHTML 4の欠点に対処するように設計されています。



これらのAPIの1つは、<audio>要素と<video>要素を使用してオーディオとビデオで動作するように特別に設計されています。 このAPIは、オーディオとビデオを再生する機能を提供し、メディアを表示するためにFlashなどのサードパーティアプリケーションを使用する必要性を排除します（少なくともサポートされているメディアファイルの場合）。











ビデオ要素に関するOpera Developer Communityの記事に付属しているこのビデオコントロールデモをご覧ください 。

4. <canvas>要素を使用すると、その場で画像を変更できます。

ほとんどの人は、視覚表示を通じて情報をより速く、より効率的に認識します。 たとえば、テーブル、番号付きデータ、および円グラフの間で、ユーザーにとってのデータの最良の認識は円グラフであり、これによりユーザーはデータの重みと比率をより適切に表すことができます。











画像のマイナスは、静止していることです。 従来の方法（Photoshopなどの画像エディターまたはExcelなどのアプリケーション）で円グラフを作成した場合、グラフィックを手動で編集しないとデータを変更できません。



<canvas>要素を使用します。 （データベースから）可変データを取得し、スクリプトを介してそれを円グラフまたはその他の2Dディスプレイに適用できます。



また、キャンバスAPIを使用すると、ユーザーは<canvas>要素と対話できます。 たとえば、ユーザーが円グラフの一部をクリックしたことに応答するスクリプトを作成できます。

5.ユーザーはWebページのセクションを編集および操作できます

HTML 5のユーザーインタラクションセクションでは、 インタラクティブなWebページを作成する新しい方法について説明しています。 contenteditable属性（trueまたはfalseのブール属性）を使用すると、ユーザーがWebページのどの部分を変更できるかをマークできます。



このメカニズムは、ユーザーがコンテンツを生成するウィキスタイルのWebサイトに役立ちます。 contenteditable属性を使用する別のオプションは、Webページテンプレートを作成することです。 これにより、HTMLに精通していないWebサイトのユーザーは、より有能なユーザーが入力する必要があるページ上の重要な場所に影響を与えることなく、コンテンツを安全に入力する便利な機会を得ることができます。



ドキュメントレベルでは、「on」または「off」の2つの値を取るdesignMode属性を使用してコンテンツを編集できるページの属性を指定できます。

最後に

仕様は2012年にW3C勧告候補ステータスに達したはずですが、新しいHTML 5の使用を開始するのにそれほど長く待たなければならないというわけではありません。 <canvas>要素（ バージョン1.5以降、部分的に実装されているMozilla Firefoxを含む）。



HTML 5は、Web開発者がコンテンツマークアップを作成する方法を再定義します。 このバージョンでは、Webページに表示されるコンテンツの記述方法を改善し、より複雑なタイプのコンテンツの使用を可能にし、メディアおよびWebアプリケーションのサポートを改善し、HTMLドキュメントの相互運用性を向上します。



これらのものはまだ開発中であり、変更される可能性があることに留意してください。これらの改善の多くは数年以内にレビューされるか、まったく実装されない可能性があります。

その他の情報源

• W3C WebサイトでHTML 5仕様の最新のワーキングドラフトを読むことができます。
• W3C WebサイトでHTML 4とHTML 5の主な違いについて学んでください。
• IBM developerWorksには、 HTML 5の基本要素に関する優れた詳細な記事があります 。
• W3C HTMLワーキンググループのWebサイトで HTML 5仕様の開発に携わっている人々について読んでください。
• WHATWG wikiでHTML 5の開発を支援するためにできることをご覧ください。

著者について

Jacob GubeはWeb開発者、デザイナー、および開発とデザインのブログSix Revisionsの著者です。 彼に連絡したい場合は、ツイッターで見つけることができます。