HTML 5 プレビュー

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は無限ループスクロール情報を実装する

推薦する

JavaScript 日付ツールの概要

ユーティリティ = { /** * 死亡年ですか? * @return {Boolse} true...

MySql 共通クエリコマンド操作リスト

MYSQL でよく使用されるクエリ コマンド: mysql> select version()...

mysql ワイルドカード (sql 高度なフィルタリング)

目次まず、値の一部と一致させるために使用される特殊文字であるワイルドカードについて簡単に紹介します。...

Vue+el-tableはセルの結合を実現します

この記事の例では、参考までにセルの結合を実現するためのel-tableの具体的なコードを共有していま...

DOCTYPEタイプの詳細な紹介

<br />通常、HTML では次の方法で DOCTYPE を宣言します。 <!D...

自動ロック画面機能を実現するjs

1. 使用シナリオこのような要件があるため、システムが開発されました。ユーザーがデスクトップを離れ...

Vueはミックスインを使用してコンポーネントを最適化します

目次ミックスインの実装フック関数のマージプロジェクト実践伸ばす要約するVue は mixins AP...

Ubuntu MySQL バージョンが 5.7 にアップグレードされました

数日前、図書館はサーバー(Ubuntu 14.04)にセキュリティ上の脆弱性があり、時間通りに修復さ...

...

Linux システムで Tomcat のポート 80 を使用する方法

アプリケーションシナリオ多くの場合、Linux サーバーに tomcat や nginx などのソフ...

Alpine Dockerイメージフォント問題解決操作

1. フォントを実行し、フォント フォルダーを開いて、使用するフォント ファイルを見つけます。 2....

MySQL 8.0.22 zip圧縮パッケージ版(無料インストール)のダウンロード、インストール、および構成手順の詳細

目次最初のステップはMySQLをダウンロードすることですステップ2: ダウンロードした圧縮パッケージ...

Vue ページ監視ユーザープレビュー時間機能実装コード

最近のビジネスでは、オンライン トレーニング システムが特定のオンライン プレビュー ページに対する...

MySQLスローログに関する知識のまとめ

目次1. スローログの紹介2. スローログの練習1. スローログの紹介スロー ログの正式名称はスロー...

JavaScript 配列の include と Reduce の基本的な使用法

目次序文配列.プロトタイプ.includes文法パラメータ戻り値例配列プロトタイプの削減文法パラメー...