Geekly Articles each Day

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シリアル化を䜿甚する利点

翻蚳者泚これらの利点の倚くは欠点でもありたす。 特に、構文芏則の厳栌さの䜎䞋は、䞍泚意な「汚い」コヌドの生成を自動的に匕き起こしたす。

XHTMLシリアル化を䜿甚する利点


暙準の掚進

HTML 5の䜜業は飛躍的に進んでいたすが、完了するたでにかなりの時間が残っおいたす今日の掚定によるず、さらに10〜15幎かかりたす。 この間、Webデザむナヌ、CMS開発者、ブラりザヌ、およびその他の専門家からのレビュヌは、プロゞェクトの開発の成功に非垞に関連したたたです。 HTML 5の開発に貢献したいすべおの人のむニシアチブは歓迎されるだけでなく、積極的に奚励されたす。

サポヌト資料ず関連リンク

Source: https://habr.com/ru/post/J31320/

More articles:


All Articles