HTML 5 プレビュー

<br />オリジナル: http://www.alistapart.com/articles/previewofhtml5
ラクラン・ハント著
翻訳者: zhaozy in 3user.com
概要<br />Web は絶えず進化しています。新しい革新的な Web サイトが毎日登場し、あらゆる点でHTMLの限界を押し広げています。HTML 4が登場してからほぼ 10 年が経ち、パブリッシャーはより優れた機能を提供する新しいテクノロジを求め続けていますが、マークアップ言語とブラウザーの制約により困難な状況に陥ることがよくあります。
より柔軟で相互運用性があり、インタラクティブで魅力的な Web サイトやアプリケーションを作成者に提供するために、 HTML 5 では、フォームコントロール、アプリケーションプログラミングインターフェイス (API)、マルチメディア、構造化、セマンティックなどのさまざまな機能が導入され、強化されています。
2004 年に始まったHTML 5 の作業は、現在、W3C HTML WG と WHATWG の共同作業によって完全に実装されています。W3C の取り組みには、Apple、Mozilla、Opera、Microsoft の 4 大ブラウザーベンダーをはじめ、さまざまな関心と専門知識を持つさまざまな組織や個人など、多くの主要プレーヤーが関与しています。
詳細な仕様の作成作業はまだ進行中であり、完成には程遠い状態です。同様に、この記事で説明した機能は将来変更される可能性があります。この記事は、現在のドラフトの主な機能の一部についての概要にすぎません。
構造
HTML 5 では、Web ページの構築を容易にするために、まったく新しい要素セットが導入されています。ほとんどのHTML 4 ベースのページには、ヘッダー、フッター、列などの共通の構造がいくつか含まれています。現在、これらのブロックは div 要素でマークされ、説明的な ID またはクラスが定義されています。

この図は、id 属性と class 属性を持つ div 要素を使用した典型的な 2 列レイアウトを示しています。ヘッダーとフッター、ヘッダーの下の水平ナビゲーションバー、メインコンテンツとして記事と右側のサイドバーが含まれます。
div 要素が多用されるのは、現在のHTML 4 バージョンではこれらのブロックを記述する明確なセマンティクスが欠如しているためです。HTML 5 では、これらのさまざまなブロックを表す新しい要素が導入されています。

これらの div 要素は、header、nav、section、article、aside、footer などの新しい要素に置き換えることができます。
<本文>
<ヘッダー>...</ヘッダー>
<nav>...</nav>
<記事>
<セクション>
...
</セクション>
</記事>
<余談>...</余談>
<フッター>...</フッター>
</本文>
これらの新しい要素を使用すると、 HTML 4 と比べていくつかの利点があります。見出し要素 (h1 - h6) と一緒に使用すると、以前のバージョンのHTMLの 6 レベルを超えて、セクション見出しのネストされたレベルをマークアップできます。仕様には、アウトラインを生成するための詳細なアルゴリズムが含まれています。これにより、以前のバージョンとの下位互換性を保ちながら、これらのコンテンツを構造化することが考慮されています。これにより、編集ツールやブラウザーで目次を生成して、ユーザーがドキュメント内を移動できるようにすることができます。
たとえば、次のマークアップ構造では、ネストされた section 要素と h1 要素が使用されています。
<セクション>
<h1>レベル 1</h1>
<セクション>
<h1>レベル 2</h1>
<セクション>
<h1>レベル 3</h1>
</セクション>
</セクション>
</セクション>
現在のブラウザとの互換性を高めるために、適切な場所で h1 要素の代わりに他の見出し要素 (h2 - h6) を使用することもできます。
特定のセクション要素を使用してページ内のセクションの目的を正確に特定することで、支援技術はユーザーがページをより簡単にナビゲートできるように支援します。たとえば、ユーザーは手間をかけずにナビゲーションブロックをスキップしたり、作成者がジャンプリンクを提供しなくても、ある記事から次の記事にすばやく移動したりできます。作成者にとっては、ドキュメントから冗長な div を削除して、よりわかりやすい要素に置き換えることで、ソースコードがより明確になり、記述しやすくなります。

前のページ1 2 3 4 次のページ全文を読む

<<: MySQL 8.0.23 インストールの超詳細なチュートリアル

>>: Reactは無限ループスクロール情報を実装する