🐛 🌍 🌁 HTML 5の最初の検討 💌 🔟 👶🏾

前文

この記事では、HTML標準の5番目のバージョンが提供する興味深い新機能について説明します。新しいタグを使用したいくつかのコード例が提供されています。また、HTMLおよびXMLシリアル化の概念を、それぞれを使用する利点の説明とともに説明します。

テキストの導入的な「叙情的な」部分は、これは、以前に公開されたHTML 5のレビュー投稿と多くの点で重複しており、同じ著者によるインタビューの断片が提供されています。

投稿者： Lahlan Hunt、 http ： //lachy.id.au

オリジナル： http : //www.alistapart.com/articles/previewofhtml5

翻訳： Alexander Musaev、 http ： //paradigm.ru

はじめに

インターネットの継続的な開発の過程で、ハイパーテキストマークアップの言語に対してますます深刻な要求がなされています。 HTML 4は10年以上使用されており、現在Webサイトで使用されている多くの革新により、仕様の制限がより明確になりました。 Web開発者は、標準が提供できる以上の機能を長い間必要としています。

HTMLの5番目のバージョンには、インタラクティブなサイトやWebアプリケーションの作成、フォームの操作、さまざまなソフトウェアインターフェイスの操作、ページへのマルチメディアコンテンツの埋め込み、ドキュメントの構造化などの多くの新機能が含まれています。

構造

HTML 5は、Webドキュメントの構造化をはるかに容易にする多くの新しい要素を提供します。多くのHTML 4ベースのページには、見出し、テキストの列、フッターなどの典型的な構造フラグメントが含まれていました。現在までの通常の解決策は、クラスまたは一意の識別子に対応するそれぞれの名前を持つdiv

コンテナを使用して、これらのブロックを定義することです。

この図は、 class

とid

属性を持つdiv

コンテナを使用して作成された2列のページの典型的なレイアウトを示しています。「ヘッダー」、ナビゲーション要素の水平ブロック、ページのメインテキストのブロック、その右側の補助列、およびフッターが含まれます。

現在のバージョンのHTML標準には、上記のページブロックをより具体的に説明するために使用できるセマンティック要素がないため、 div

要素が頻繁に使用されます。 HTML 5標準では、この欠陥を考慮に入れ、各タイプマークアップブロックの個別の説明用にいくつかの新しいタグを提供しています。

この例のdiv

コンテナは、新しい要素header

、 nav

、 section

、 article

、 aside

、およびfooter

置き換えられます。この場合のHTMLコードは次の形式を取ります。

<body> 
      

        
        
        
      

     <header>...</header> 
      

        
        
        
      

     <nav>...</nav> 
      

        
        
        
      

     <article> 
      

        
        
        
      

     <section> 
      

        
        
        
      

     ... 
      

        
        
        
      

     </section> 
      

        
        
        
      

     </article> 
      

        
        
        
      

     <aside>...</aside> 
      

        
        
        
      

     <footer>...</footer> 
      

        
        
        
      

     </body>

上記の新しいタグを支持する理由はいくつかあります。たとえば、これらを使用すると、6レベルの見出し（ h1

- h6

）の既存の制限が削除されます。この仕様では、目次を作成するためのアルゴリズムについて詳しく説明しています。これは、新しい構造要素を考慮するだけでなく、標準の以前のバージョンとの下位互換性も維持します。この革新技術を使用して目次を自動的に生成し、Webページ内のナビゲーションを簡素化できます。

次の例では、コンテナsection

とh1

共有していsection

。

<h1>Level 1</h1> 
      

        
        
        
      

     <section> 
      

        
        
        
      

     <h1>Level 2</h1> 
      

        
        
        
      

     <section> 
      

        
        
        
      

     <h1>Level 3</h1> 
      

        
        
        
      

     </section> 
      

        
        
        
      

     </section>

既存のブラウザとの互換性を高めるために、 h1

に加えて、他のレベルのヘッダー（ h2

- h6

）を使用することもできます。

ページセクションの目的が特定のタグ名によって自動的に決定できる場合、より簡単で効率的なドキュメントナビゲーションを編成することが可能になります。たとえば、ユーザーは1クリックで目次をスクロールしたり、大きなドキュメントのコンテンツにすばやく移動したり、ある記事から次の記事に移動したりできます。最も興味深いのは、同時に、補助ナビゲーションリンクをページに追加することが完全にオプションになることです。同時にコードは、不要な二次的な詳細で「混乱」が少なくなります。

head

要素はセクションタイトルとして解釈されます。このようなコンテナには、必要に応じて、名前自体だけでなく、サブタイトル、変更履歴、著者へのリンク、および見出しに論理的に起因するその他の情報も含めることができます。

<header> 
      

        
        
        
      

     <h1>A Preview of HTML 5</h1> 
      

        
        
        
      

     <p class="byline">By Lachlan Hunt</p> 
      

        
        
        
      

     </header> 
      

        
        
        
      

     
      

        
        
        
      

     <header> 
      

        
        
        
      

     <h1>Example Blog</h1> 
      

        
        
        
      

     <h2>Insert tag line here.</h2> 
      

        
        
        
      

     </header>

footer

要素は、関連するセクションの最後のブロックです（「紙」ドキュメントのページのフッターの類似物）。このようなブロックには、原則として、セクションに関する補助情報が含まれています。たとえば、関連資料へのリンク、著作権情報など。

<footer>© 2007 Example Inc.</footer>

nav

、ナビゲーションリンクを対象としています。これは、サイト内のページ間遷移とページ内ナビゲーション（目次の整理）の両方に役立ちます。

<nav> 
      

        
        
        
      

     <ul> 
      

        
        
        
      

     <li><a href="/">Home</a></li> 
      

        
        
        
      

     
      

        
        
        
      

     <li><a href="/products">Products</a></li> 
      

        
        
        
      

     <li><a href="/services">Services</a></li> 
      

        
        
        
      

     <li><a href="/about">About</a></li> 
      

        
        
        
      

     
      

        
        
        
      

     </ul> 
      

        
        
        
      

     </nav>

aside

コンテナは、補助的な材料、たとえば、セカンダリテキスト（サイドバー）を含む追加の列を定義するために使用されます。

<aside> 
      

        
        
        
      

     <h1>Archives</h1> 
      

        
        
        
      

     
      

        
        
        
      

     <ul> 
      

        
        
        
      

     <li><a href="/2007/09/">September 2007</a></li> 
      

        
        
        
      

     <li><a href="/2007/08/">August 2007</a></li> 
      

        
        
        
      

     <li><a href="/2007/07/">July 2007</a></li> 
      

        
        
        
      

     </ul> 
      

        
        
        
      

     </aside>

section

要素は、汎用セクションとして解釈されます。このようなセクションは、たとえば段落である場合があります。

<section> 
      

        
        
        
      

     <h1>Chapter 1: The Period</h1> 
      

        
        
        
      

     <p>It was the best of times, it was the worst of times, 
      

        
        
        
      

     it was the age of wisdom, it was the age of foolishness, 
      

        
        
        
      

     it was the epoch of belief, it was the epoch of incredulity, 
      

        
        
        
      

     it was the season of Light, it was the season of Darkness, 
      

        
        
        
      

     ...</p> 
      

        
        
        
      

     </section>

（Charles DickensのTale of Two Citiesからの抜粋例）

article

は、ドキュメント、ページ、またはサイトの独立したセクションを定義します。この要素は、ニュース、フォーラムの投稿、ブログの投稿またはコメントなどを強調するために使用できます。

<article id="comment-2"> 
      

        
        
        
      

     <header> 
      

        
        
        
      

     <h4><a href="#comment-2" rel="bookmark">Comment #2</a> 
      

        
        
        
      

     by <a href="http://example.com/">Jack O'Niell</a></h4> 
      

        
        
        
      

     <p><time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time> 
      

        
        
        
      

     </header> 
      

        
        
        
      

     
      

        
        
        
      

     <p>That's another great article!</p> 
      

        
        
        
      

     </article>

オーディオおよびビデオ素材

近年、公開を促進する多数のサービス（YouTube、Google Video、MySpaceなど）のおかげで、オーディオ録音とビデオがインターネット上で広く普及しています。組み込みのHTML機能がないため、そのようなコンテンツをホストしているほとんどのサイトは、Flashを補助として使用しています。この技術の選択は通常、マルチメディアコンテンツ（QuickTime、Windows Media）の再生を保証できる代替技術と比較して、Flashが現在ブラウザ間で最も幅広いサポートを持っているという事実によって正当化されます。

Flashで書かれた膨大な数のマルチメディアプレーヤーは、ほとんどの場合、ユーザーに同じ機能（再生、一時停止、巻き戻し、ボリュームコントロール）が提供されているにもかかわらず、開発者がインターフェイスを独立して形成することを好むことを確認するものです。将来、これらの機能はブラウザ自体でサポートされる予定であり、Webページにオーディオとビデオの記録を埋め込む基本的な機能と、DOM APIを介してこれらの要素を管理する機能を提供します。

新しいvideo

およびaudio

タグを使用すると、非常に簡単になります。 APIのほとんどの機能は一致しますが、視覚的素材と非視覚的素材の再現の方向が1つだけ異なります。

OperaとWebKitはすでにvideo

タグの部分的なサポートを含むリリースを持っています。現在、 Operaブラウザの実験版またはWebKitの最新の週刊ビルドをダウンロードして、次のコード例の動作を実演できます。 OperaはOgg Theoraをサポートしており、WebKitはサードパーティのコーデックを含むすべての形式をQuickTimeとして認識します。

次の例に示すように、 video

をWebページに埋め込む最も簡単な方法は、 video

コンテナを使用することです。 controls

属性は、標準のメディアプレーヤーのインターフェイスを表示するかどうかを決定するために使用されます（この場合、再生コントロールが表示されます）。

<video src="video.ogv" controls poster="poster.jpg" 
      

        
        
        
      

     width="320" height="240"> 
      

        
        
        
      

     <a href="video.ogv">Download movie</a> 
      

        
        
        
      

     </video>

オプションのposter

属性を使用して、記録の再生を開始する前にvideo

コンテナに表示される静的画像を決定できます。同様の組み込み機能を持つビデオ形式（MPEG4など）がありますが、上記のアプローチを使用すると、特定のコーデックを参照せずにこの機能を実現できます。

まったく同じ方法で、 audio

要素を使用してaudio

ドキュメントにオーディオドキュメントを埋め込むことができます。オーディオタグとvideo

タグの属性のほとんどは同じですが、明らかな理由から、オーディオにはwidth

、 height

、 poster

がありません。

<audio src="music.oga" controls> 
      

        
        
        
      

     <a href="music.oga">Download song</a> 
      

        
        
        
      

     </audio>

HTML 5は、いくつかの代替形式のオーディオおよびビデオファイルへのリンクを挿入するためのソース要素を提供します。ブラウザーは、サポートするコーデックとコードで指定されたコンテンツ形式の種類に基づいて、最も望ましいオプションを選択できます。ネストされたsource

タグを使用する場合は、 audio

コンテナとvideo

コンテナのsrc

属性を省略する必要があります;それ以外の場合、 source

タグは無視されます。

<video poster="poster.jpg"> 
      

        
        
        
      

     <source src="video.3gp" type="video/3gpp" 
      

        
        
        
      

     media="handheld"> 
      

        
        
        
      

     <source src="video.ogv" type="video/ogg; 
      

        
        
        
      

     codecs="theora, vorbis"> 
      

        
        
        
      

     <source src="video.mp4" type="video/mp4"> 
      

        
        
        
      

     </video> 
      

        
        
        
      

     
      

        
        
        
      

     <audio> 
      

        
        
        
      

     <source src="music.oga" type="audio/ogg"> 
      

        
        
        
      

     <source src="music.mp3" type="audio/mpeg"> 
      

        
        
        
      

     </audio>

ユーザーインターフェイスの機能を制御し、ページの全体的なデザインとの最適なコンプライアンスを確保したい開発者向けに、再生プロセスを制御できる特別なAPIが提供されています。このAPIは、 play()

およびpause()

メソッド（その意味は名前から明らかです）、およびcurrentTime

プロパティを定義します。次の例では、ビデオを先頭に「巻き戻す」ために使用されます。

<video src="video.ogg" id="video"></video> 
      

        
        
        
      

     
      

        
        
        
      

     <script> 
      

        
        
        
      

     var video = document.getElementById("video"); 
      

        
        
        
      

     </script> 
      

        
        
        
      

     
      

        
        
        
      

     <p> 
      

        
        
        
      

     <button type="button" onclick="video.play();">Play</button> 
      

        
        
        
      

     <button type="button" onclick="video.pause();">Pause</button> 
      

        
        
        
      

     <button type="button" onclick="video.currentTime = 0;"> 
      

        
        
        
      

     << Rewind</button> 
      

        
        
        
      

     </p>

（opera.comに類似）

この記事にリストされているもの以外にも、他の多くのAPI属性と関数があります。それらの詳細な記述は仕様の現在関連しているワーキングバージョンで見つけることができます。

書類の提出

HTML 5は、独自の構文で記述されている以前のバージョンのHTMLやXHTMLとは異なり、Document Object Model（DOM）の条件に従って記述されています。ブラウザは、ツリー構造を使用してドキュメントを内部的に表します。

以下は、ページタイトル、見出し、およびテキストの1つの段落で構成されるドキュメント構造の最も単純な例です。

このようなツリーには、 head

コンテナのtitle

要素と、 h1

およびp

れていbody

。

HTML 5標準の定義にDOMを選択する主な理由（および利点）は、構文に関係なく言語自体を記述できることです。 HTMLドキュメントを表現できる構文には、HTMLシリアル化（HTML 5とも呼ばれます）とXMLシリアル化（またはXHTML 5）の2つの主な構文があります。

HTMLシリアル化は、以前のバージョンの通常のHTML構文（SGMLに基づいて作成された）に基づいています。その定義は、ブラウザーが実際にHTMLを処理する方法との整合性を高めることを目的としています。

<!DOCTYPE html> 
      

        
        
        
      

     <html> 
      

        
        
        
      

     <head> 
      

        
        
        
      

     <title>An HTML Document</title> 
      

        
        
        
      

     </head> 
      

        
        
        
      

     
      

        
        
        
      

     <body> 
      

        
        
        
      

     <h1>Example</h1> 
      

        
        
        
      

     <p>This is an example HTML document. 
      

        
        
        
      

     </body> 
      

        
        
        
      

     </html>

HTMLの以前のバージョンと同様に、一部のタグはオプションのままであり、その存在は自動的に暗示されます。

XMLシリアル化では、XHTML 1.0と同様にXML 1.0と名前空間を使用します。

<html xmlns="http://www.w3.org/1999/xhtml"> 
      

        
        
        
      

     <head> 
      

        
        
        
      

     <title>An HTML Document</title> 
      

        
        
        
      

     </head> 
      

        
        
        
      

     
      

        
        
        
      

     <body> 
      

        
        
        
      

     <h1>Example</h1> 
      

        
        
        
      

     <p>This is an example HTML document.</p> 
      

        
        
        
      

     </body> 
      

        
        
        
      

     
      

        
        
        
      

     </html>

前の例とは異なり、ここにはxmlns

属性があり、閉じているp

タグ（XMLコンテキストに存在する必要があります）もあります。シリアル化の違いを判断するために、ブラウザはMIMEタイプの値を使用します。 text/html

として定義されたドキュメントはすべて、HTMLシリアル化の要件を満たしている必要があります。 MIMEタイプがapplication/xhtml+xml

場合、XMLシリアル化の要件を満たす必要があります。

適切なタイプのシリアル化の選択は、ウェブマスターにかかっています。絶対にすべての場合において、最初に2つの可能なオプションのいずれも優先されると見なすことはできません。

HTMLシリアル化を使用する利点：

下位互換性。
HTML標準の以前のバージョンのよく知られた構文。
軽微なエラーを許容する「ソフト」構文規則。このため、ユーザーは、ドキュメントを表示できないことに関するブラウザからのメッセージを見る可能性が低くなります（実際にドキュメントにエラーが存在する場合でも）。
いくつかのタグといくつかの属性の値を省略できる便利で簡潔な構文。

翻訳者注：これらの利点の多くは欠点でもあります。特に、構文規則の厳格さの低下は、不注意な「汚い」コードの生成を自動的に引き起こします。

XHTMLシリアル化を使用する利点：

厳密なXML構文規則により、より適切なマークアップを記述せず、コンテンツをさらに処理しやすくなります。
他のXMLベースの標準（SVGやMathMLなど）との統合。
標準のXML処理ツールとの互換性（素材の処理および公開時によく使用されます）。

標準の推進

HTML 5の作業は飛躍的に進んでいますが、完了するまでにかなりの時間が残っています（今日の推定によると、さらに10〜15年かかります）。この間、Webデザイナー、CMS開発者、ブラウザー、およびその他の専門家からのレビューは、プロジェクトの開発の成功に非常に関連したままです。 HTML 5の開発に貢献したいすべての人のイニシアチブは歓迎されるだけでなく、積極的に奨励されます。

サポート資料と関連リンク：

以前のバージョンに関連して発生したすべての変更をリストするHTML 4との違い。
HTML設計の原則 -設計プロセスに関して現在どの決定が下されているかに基づいて、原則の議論。
HTML 5 Web開発者ガイド -Webデザイナーと開発者がHTML 5について知る必要があるすべてを理解できるように設計されています。ガイドラインとデモを提供します。
W3CのHTML WG
HTML WGメーリングリスト
HTML Wiki Wiki
WHATWGメーリングリスト
WHATWGフォーラム
WHATWGブログ

HTML 5の最初の検討

前文

はじめに

構造

オーディオおよびビデオ素材

書類の提出

標準の推進

More articles: