HTML 5 の新しい要素

著者：Eve Cole 更新時間：2009-05-31 00:37:41

私の考えでは、HTML 5 は妥協的な解決策ではありますが、抜本的ではありませんが、テクノロジーの継続的な進歩を促進することができます。名前空間はなく、要素を閉じる必要はありません (もちろん、これは利点ではありません)。ブラウザは一部のエラーを寛大に処理できます。すべては前世紀の HTML 4 の実践に従っています。 HTML レンダリングに関して言えば、ブラウザは 1999 年のレベルで止まっています。この目的を達成するために、HTML 5 は実用的なソリューションであり、長年にわたり世界中に散在してきた HTML を処理し続けることができるだけでなく、ブラウザのメーカーが新しい機能を追加することも容易になります。これを正常に劣化させるといいます。 HTML 5 で追加された新しい要素をいくつか見てみましょう。

構造要素

これは本当に嬉しいことです。現時点では、「ユニバーサル」 div を通じてのみ構造を定義できます。ヘッダー、フッター、サイドバーなどの属性 ID の値を設定することで、ヘッダー、ボトム、またはサイドバーをそれぞれ表現しようとします。これらを使用すると、コード作成者は ID の命名について心配する必要がなくなり、携帯電話、リーダー、その他のデバイスにとってセマンティックな利点がさらに広がります。 HTML 5 では、最も一般的に使用される次の構造を表現するための新しい構造要素が追加されています。

セクション: これは、本の一部または章、または章内のセクションを表すことができます。

header: ページ本文のヘッダー。 head要素ではありません

フッター: ページの下部 (フッター)。電子メールの署名の場所となる場合があります。

nav: 他のページへのリンクのコレクション

記事: ブログ、雑誌、要約などに掲載された独立した記録。

たとえば、HTML 5 で書かれたブログのホームページは次のようになります (一部省略されています)。

引用した内容は以下の通りです。

<<!DOCTYPE HTML>
<HTML>
<頭>
<title>本当に</title>
</head>
<本文>
<ヘッダー>
<h1>レアジー</h1>
</ヘッダ>
<セクション>
<記事>
<h2><a href="http://realazy.org/blog">タイトル</a></h2>
<p>内容はここにあります...(n の単語は省略します)</p>
</記事>
<記事>
<h2><a href="http://realazy.org/blog">タイトル 2</a></h2>
<p>コンテンツ 2 はこちらです...(n の単語を省略します)</p>
</記事>
...
</セクション>
<フッター>
<ナビ>
<ul>
<li><a href="http://realazy/blog">ナビゲーション 1</a></li>
<li><a href="http://realazy/blog">ナビゲーション 2</a></li>
...
</ul>
</nav>
<p>© 2007 リアジー</p>
</フッター>
</body>
</HTML>ブロックレベルのブロックセマンティック要素
HTML には、次の 3 つのブロックレベル要素も追加されます。

脇に
図/コード>
ダイアログ
「side」は、メモ、ヒント、サイドバー、要約、挿入された引用などを補足的なコンテンツとして表現するために使用できます。たとえば、ブログのサイドバーを次のように表現します。

<余談>
<h3>最新の記事</h3>
<ul>
<li><a href="http://realazy.org/blog/">記事のタイトル</a></li>
...
</ul>
</aside>figure 要素は、説明付きのブロックレベルの画像を表します。例えば：

<図>
<legend>これは画像の説明です</legend>
<img alt="画像の代替テキスト" src="/path/to/img.png" />
</figure>dialog 要素は、人々の間の会話を表現するために使用されます。 HTML 5 では、dt は話者を表すために使用され、dd は話者の内容を表すために使用されます。のように：

<ダイアログ>
<dt>仏陀</dt>
<dd>色は空です</dd>
<dt>悟空</dt>
<dd>空の...インラインのセマンティック要素が必要です

m 要素は、強調する必要のないテキストをマークするために使用されます。これはまだ議論の余地があり、最終的にはマークに変更される可能性があります。

time 要素は、その名前が示すように、時間を表現するために使用されます。マシンが認識できる時刻を示すには、次のような日時機能が必要です。

<time datetime="2008-08-08T20:08:08">2008 年 8 月 8 日午後 8:08:08</tiem> メーター要素は、特定の範囲内の値を表します。給与、割合、端数などに使用できます。例えば：

申し訳ありませんが、<meter>150cm</meter> しかありません。次のようなさまざまな意味を表現する 6 つの機能もあります。

<p>あなたのスコアは次のとおりです: <meter value="88.7" min="0" max="100" low="65" high="96"最適化="100">B+</meter>。</p >

また、その名前が示すとおり、進歩を表すために使用される progress もあります。

目標達成: <progress value="40" max="100">40%</progress> マルチメディアの埋め込み

ビデオとオーディオ要素を追加しました。名前が示すように、それぞれビデオとサウンドを挿入するために使用されます。形式に関しては、実装はブラウザーに任されており、HTML では特定の形式を再生するための特別なコードは必要なくなりました。 imgと同様にpng、jpg、gifいずれでも表示可能です。特に、コンテンツを含めることができます。たとえば、特定の曲に歌詞を挿入できます。

引用した内容は以下の通りです。
<audio src="あなたと一緒に寝る人.mp3">
<p>涙は枯れた</p>
<p>自分が間違っていることにどうしたら耐えられますか</p>
<p>悲しみと喜びの瞬間がありました</p>
...
</オーディオ>

インタラクティブ性

HTML 5 は Web アプリケーション 1.0 とも呼ばれるため、インタラクティブな機能もさらに開発されています。これらのタグは、ページのインタラクティブなエクスペリエンスを向上させるために設計されています。

引用した内容は以下の通りです。
詳細
データグリッド
メニュー
指示

詳細

これは特定のコンテンツを表すために使用されますが、デフォルトではコンテンツが表示されない場合があります。何らかの手段 (クリックなど) で凡例を操作すると表示されます。これは、JavaScript を使用してコンテンツの一部を非表示にし、クリック後にコンテンツを表示する現在の方法に似ています。例えば：

人生のあらゆる部分を一文で記録し、

引用した内容は以下の通りです。
<詳細>
<凡例>詳細</凡例>
<p>コミュニケーションと共有、あなたとあなたの友人の距離を近づけ、MSN/GTalk/QQ、SMS、モバイル WAP をサポート</p>
</details>詳細を表示するかどうかを指定する open 属性を持つことができます。

データグリッドはデータの制御に使用され、ユーザーまたはスクリプトによって更新できます。

メニューは HTML 2 には存在していましたが、HTML 4 では廃止されました。 HTML 5の無駄を利用し、期間中にコマンド要素を追加します。

参考: HTML 5 の新しい要素