HTML5のHTML要素拡張（パート1） - 新しく追加された要素と使用概要の概要

著者：Eve Cole 更新時間：2025-04-17 23:32:03

ページを開発するプロセスを検討してください。

1.ページの構造を設計-HTML：このプロセスは、さまざまなHTML要素を使用してWebページの構造を構築することです。

2。ページの外観を設計-CSS：このプロセスは、CSSを使用してWebページの外観を改善することです。

3。ページの設計動作-JavaScript：このプロセスは、Webページの要素に特定の動作を与えることです。

CSSに加えて、HTML5は他の2つの側面でさまざまな程度に拡張されています。このシリーズは、最初の側面に焦点を当てています。前のセクションでは、複雑なキャンバスとSVG要素を学習しました。次の章では、他のHTML5追加要素を要約します。

構造要素

HTML5には、ヘッダー、フッター、ナビゲーションナビゲーション、コンテンツ記事、章セクションなどの新しい構造要素が追加されています。意味を下に示します。

ページ全体の構造要素に加えて、HTML5には、補助要素が脇にあるブロックレベルのセマンティック要素、画像要素の図、詳細な要素の詳細なども追加されます。ページのレイアウトの意味をよりよく表示することに加えて、これらの要素は通常のDIVと違いはありません。簡単な例を次に示します。

<html>

<head>

</head>

<body>

<ヘッダー>

</header>

<記事>

</article>

<記事>

</article>

<nav>

</nav>

</section>

<nav>

<ul>

<ul>

</ul> </li>

<ul>

</ul>

</li>

</ul>

</nav>

<フッター>

</footer>

</body>

</html>

これらの要素は比較的簡単に使用できますが、注意すべき点はまだいくつかあります。

1. Divの代替品としてセクションを使用しないでください

セクションはスタイルコンテナではありません。セクション要素は、ドキュメントの概要の作成に役立つコンテンツのセマンティック部分を表します。ヘッダーを含める必要があります。通常、それはほとんどの記事として存在します（もちろん、その一部として記事が可能です）。ページコンテナとして使用される要素を見つけたり、追加のスタイルコンテナが必要な要素を見つけたい場合は、Divを引き続き使用してください。

2。必要に応じてヘッダーとhgroupのみを使用します

書く必要のないラベルを書くことは意味がありません。ヘッダーとhgroupの使用シナリオは通常、次のとおりです。

•ヘッダー要素は、セクションのヘッダーとしてよく使用される一連の導入またはナビゲーション補助テキストを表します。

•ヘッドにサブヘッディング、字幕、さまざまなロゴテキストなどの多層構造がある場合、Hgroupを使用して、H1-H6要素をセクションのヘッドとして組み合わせます。

ここでは、ヘッダーまたはhgroupにヘッド要素がいくつかしかない場合、これらの2つの役に立たないタグを削除することをお勧めします。たとえば、：

<記事>

<ヘッダー>

<h1>私の最高のブログ投稿</h1>

</header>

<！ - 記事コンテンツ - >

</article>

直接変更してください：

<記事>

<h1>私の最高のブログ投稿</h1>

<！ - 記事コンテンツ - >

</article>

同じことが言えます：

<ヘッダー>

<h1>私の最高のブログ投稿</h1>

</hgroup>

<p>リッチクラーク</p>

</header>

直接変更してください：

<ヘッダー>

<h1>私の最高のブログ投稿</h1>

<p>リッチクラーク</p>

</header>

3. NAVを悪用しないでください

NAV要素は、このページの他のページまたは他の部分にリンクするページのブロックを表します。ナビゲーションリンクを含むブロック。

ただし、ページ上のすべてのリンクをNAV要素に配置する必要があるわけではありません。この要素は、メインナビゲーションブロックとして使用することを目的としています。特定の例を示すために、多くの場合、利用規約、ホームページ、著作権通知ページなど、フッターには多くのリンクがあります。フッター要素自体は、これらの状況に対処するのに十分です。ここではNAV要素も使用できますが、通常は不要であると見なされます。

4。数字を乱用しないでください

数字は液体含有量である必要があり、時にはタイトルの説明が含まれています。一般に、ドキュメントストリームの独立ユニットとして参照されます。これは、図の最良のシナリオです。ドキュメントフローに影響を与えることなく、メインコンテンツページからサイドバーに移動できます。図は、ドキュメントでのみ参照するか、セクション要素に囲まれている必要があります。

純粋に画像のレンダリング（ロゴなど）の場合、ドキュメントの他の場所で引用されておらず、場所を移動する必要がない場合は、図を使用しないでください。

5.不要な型属性を使用しないでください

HTML5では、スクリプトとスタイル要素は型属性を必要としなくなりました。もちろん、執筆に問題はありませんが、ベストプラクティスの観点からは、書く必要はありません。

オーディオ要素

オーディオ要素は、音楽やその他のオーディオストリームなどのサウンドコンテンツを識別するために使用されます。この要素でサポートされている形式を次の表に示します。

	IE 9	Firefox 3.5	オペラ10.5	クロム3.0	サファリ3.0
Ogg Vorbis		√	√	√
mp3	√			√	√
WAV		√	√		√

オーディオタグには、コンテンツを制御するために使用されるいくつかの属性、オーディオの再生方法などがあります。これらの属性は、SRC（ファイル名）、プリロード（ページが読み込まれたときにロード）、コントロール（ディスプレイコントロール）、ループ（ループ）、オートプレイ（オートプレイ）です。次の例では、オーディオが読み込まれるとすぐにページが再生され、再生され続けます。提供されたコントロールにより、ユーザーはオーディオの再生を停止または再起動できます。

ブラウザはオーディオ要素をサポートしていません。

</audio>

ブラウザが要素をサポートしていない場合、要素のテキスト情報が表示されます。

自動再生要素が設定されている場合、プリロードプロパティは自動的に無視されます。 Preload = autoが設定されている場合、ページが読み込まれた後にオーディオがロードされます。

オーディオ要素を使用すると、複数のソース要素がブラウザと互換性があることを指定できます。ソース要素は、異なるオーディオファイルをリンクできます。ブラウザは、最初の認識可能な形式を使用します。

<audio>

ブラウザはオーディオ要素をサポートしていません。

</audio>

ビデオ要素

ビデオ要素を使用すると、ビデオクリップを再生したり、ビジュアルメディアをストリーミングしたりできます。この要素でサポートされている形式を次の表に示します。

形式	すなわち	Firefox	オペラ	クロム	サファリ
ogg	いいえ	3.5+	10.5+	5.0+	いいえ
MPEG 4	9.0+	いいえ	いいえ	5.0+	3.0+
webm	いいえ	4.0+	10.6+	6.0+	いいえ

オーディオ要素のすべての属性と、ミュート、ポスター（画像を待っている）、幅、高さがあります。言うまでもなく、最後の2つの意味。ビデオが読み込まれている場合、またはビデオがロードなしの状態にある場合、ポスター属性（絶対的または相対URLを指定）により、最初に対処する画像を見つけることができます。ミュートはミュートされたことを意味します。

ビデオは、互換性の問題を解決するためのソース要素の使用もサポートしています。小さな例を参照してください：

ブラウザはビデオ要素をサポートしていません。

</video>

ビデオサウンドを再生したくない場合は、Muted = Mutedを設定します。

さらに、ビデオ要素は、DOM操作の再生を制御するプロセスをサポートするためのいくつかの方法、プロパティ、およびイベントも提供します。たとえば、再生、一時停止、ロード、その他の方法を呼び出します。直接読み取ったり設定したりできるボリュームや再生時間などのプロパティもあります。さらに、使用できる再生、一時停止、終了などを開始するイベントがあります。次の例を参照してください。

<！doctype html>

<html>

<body>

<button onclick = "playpause（）"> play/pause </button>

<button onclick = "makemall（）"> small </button>

<button onclick = "makenormal（）"> normal </button>

<ビデオID = "Video1">

ブラウザはビデオ要素をサポートしていません。

</video>

</div>

var myvideo = document.getElementById（ "Video1"）;

function playpause（）

{

if（myvideo.paused）

myvideo.play（）;

それ以外

myvideo.pause（）;

}

関数makebig（）

{

myvideo.width = 560;

}

function makemall（）

{

myvideo.width = 320;

}

function makenormal（）

{

myvideo.width = 420;

}

</script>

</body>

</html>

実際、新しい執筆方法に注意を払う必要があります。上記の例では、次のようなオーディオ要素を書きます。

ブラウザはオーディオ要素をサポートしていません。

</audio>

実際、HTML5には多くのアイテムコントロール、自動再生、およびループが導入されています。これらのプロパティは、上記のようにそれらを書くのに問題ありませんが、推奨される方法は次のように書くことです。

ブラウザはオーディオ要素をサポートしていません。

</audio>

ブラウザはこれらのプロパティに遭遇するため、これらのプロパティが有効になっていることを意味します。つまり、これらのプロパティを書いて強制的にfalseに設定する場合、効果は依然としてtrueと同等であるため、一般に属性名のみを記述することをお勧めします。

この執筆問題も形で存在します。フォームと入力の多くの新しいプロパティはブール特性であり、推奨される書き込み方法を使用する必要があります。

メトリックを示す要素

すべてのブラウザが次の要素をサポートするわけではありませんが、基本的にChromeへの影響を確認できます。

進捗バー要素

この要素を使用して、ダウンロードされた進行状況バーを表示します。2つの属性のみが値と最大値です。これは非常に簡単です。 ChromeとFirefoxがサポートされています。

<p>進行状況をダウンロード：

</p>

メトリック要素

この要素を使用して、指示図を示す標準範囲クラスに指定された値を表示し、異なる範囲内の値は異なる色を示します。一部のWebサイトは、このことを使用してユーザーの現在のエクスペリエンス値を表示します。ブラウザがこの要素をサポートしていない場合、要素の中央のテキストが直接表示されます。 Chromeは現在サポートされています。

<p>スコアは次のとおりです。

<メーター値= "88.7" min = "0" max = "100" low = "65" high = "96" optimum = "100"> b+</meter>。

</p>

それを実行すると、黄色の巻物のようなものが表示されます。値を50に変更すると、インジケータバーの色が赤くプログラムされていることがわかります。

非常に多くの新しい要素の紹介があります。その他の要素の説明については、W3Cの完全なタグリストを参照してください。

実用的なリファレンス：

W3Cチュートリアル：http：//www.w3schools.com/html5/default.asp

公式HTML5ガイダンス：http：//dev.w3.org/html5/html-author/

かなり良いガイドのウェブサイト：http：//html5doctor.com/

html5中国のチュートリアル：http：//www.html5china.com/

優れたフロントエンドブログ：http：//www.pjhome.net/default.asp?cateid=1