HTML5 の新しい要素

HTML 5 は、既存の HTML 4.01、XHTML 1.0、および DOM Level 2 HTML 標準を置き換えることを目的とした新しい Web 標準です。これは、Adobe Flash、Microsoft Silverlight、Sun JavaFX などのプラグインベースのリッチ インターネット アプリケーション (RIA) に対するブラウザの必要性を減らすことを期待しています。

HTML 5 は、Web サイトの典型的な現代の使用法を反映する多数の新しい要素と属性を提供します。それらの一部は、技術的には <div> タグや <span> タグと似ていますが、<nav> (サイト ナビゲーション ブロック) や <footer> など、特定の意味を持っています。このようなタグは、検索エンジンのインデックス作成、小さな画面デバイス、視覚障害者による使用を容易にします。また、標準インターフェイスを通じて、<audio<video> タグなどの他のブラウジング要素に新しい機能も提供します。

HTML 5 で提供される新しいタグの使用法と HTML との違いを見てみましょう。

<article> タグは外部コンテンツを定義します。たとえば、外部ニュース プロバイダーからの新しい記事、ブログからのテキスト、フォーラムからのテキストなどです。または他の外部ソースからのコンテンツ。
HTML5:<article></article>
HTML4:<div></div>

<aside> タグは記事以外のコンテンツを定義します。余談の内容は記事の内容と関連している必要があります。
HTML5:<余談>余談コンテンツは独立したコンテンツですが、ドキュメントのコンテンツに関連している必要があります。 </aside>
HTML4:<div>Aside のコンテンツは独立したコンテンツですが、ドキュメントのコンテンツに関連している必要があります。 </div>

<audio> 音楽やその他のオーディオ ストリームなどのサウンドを定義します。
HTML5:<audio src="someaudio.wav">お使いのブラウザは audio タグをサポートしていません。 </audio>
HTML4:<object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object>

<canvas> タグは、グラフやその他の画像などのグラフィックを定義します。この HTML 要素は、クライアント側のベクター グラフィックス用に設計されています。これには独自の動作はありませんが、描画 API をクライアント JavaScript に公開して、スクリプトがキャンバスに必要なものを何でも描画できるようにします。
HTML5:<canvas id="myCanvas" width="200" height="200"></canvas>
HTML4:<object data="inc/hdr.svg" type="image/svg+ xml " width="200" height="200"></object>

<command> タグは、ラジオ ボタン、チェック ボックス、ボタンなどのコマンド ボタンを定義します。
HTML5: <command onclick=cut()" label="cut">
HTML4: none

<datalist> ラベルはオプションのデータのリストを定義します。input 要素と組み合わせて使用​​すると、入力値のドロップダウン リスト。
HTML5: <datalist></datalist>
HTML4: コンボボックスを参照。

<details> タグは要素をクリックすることで表示または非表示にできます。詳細のタイトルを作成するために使用します。タイトルはユーザーに表示され、クリックすると詳細を開いたり閉じたりできます。
HTML4: <dl style="display. hidden"></dl>

HTML5: <embed src="horse.wav" />
HTML4: <object data= " flash.swf" type="application/x-shockwave-flash"></object>

<figure> タグは要素を結合するために使用されます。 <figcaption> 要素のグループにキャプションを追加するには、<figcaption> 要素を使用します。
HTML5: <figure><figcaption>中華人民共和国</figcaption><p>中華人民共和国は 1949 年に誕生しました...</p></figure>
HTML4: <dl>< ;h1>PRC</h1><p>中華人民共和国は 1949 年に誕生しました...</p></dl>

<footer> タグはセクションまたはドキュメントのフッターを定義します。 。通常、これには作成者の名前、文書の作成日、および/または連絡先情報が含まれます。
HTML5: <footer></footer>
HTML4: <div></div>

<header> タグはセクションまたはドキュメントのヘッダーを定義します。
HTML5: <header></header>
HTML4: <div></div>

<hgroup> タグは、Web ページまたはセクションのタイトルをグループ化するために使用されます。
HTML5: <hgroup></hgroup>
HTML4: <div></div>

<keygen> タグは生成されるキーを定義します。
HTML5: <keygen>
HTML4: none

<mark> これは主に、強調表示する必要があるテキストをユーザーに視覚的に提示するために使用されます。 <mark> タグの一般的な用途は、検索結果で検索キーワードをユーザーに強調表示することです。
HTML5: <mark></mark>
HTML4: <span></span>

<meter> タグは重みと尺度を定義します。最大値と最小値がわかっている測定にのみ使用してください。要素のテキストまたは min/max 属性のいずれかで、メジャーの範囲を定義する必要があります。
HTML5: <meter></meter>
HTML4: none

<nav> タグはナビゲーション リンクの部分を定義します。
HTML5: <nav></nav>
HTML4:<ul></ul>

<output> タグは、スクリプト出力などのさまざまなタイプの出力を定義します。
HTML5: <output></output>
HTML4: <span></span>

<progress> タグが実行されているプロセス。 <progress> タグを使用すると、JavaScript で時間のかかる関数の進行状況を表示できます。
HTML5: <progress></progress>
HTML4: none

<rp> タグは、ruby 要素をサポートしていないブラウザーによって表示されるコンテンツを定義するために、ruby コメントで使用されます。
HTML5: <ruby>汉<rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
HTML4: なし

<rt> タグは、文字 (中国語のピンインまたは文字) の解釈または発音を定義します。
HTML5: <ruby>中国語 <rt> ㄏㄢˋ </rt></ruby>
HTML4: none

<ruby> タグ定義のルビコメント (中国語のふりがなまたは文字)。
HTML5: <ruby>汉<rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
HTML4: なし

<section> ドキュメント内のセクション (セクション、セクション) を定義します。章、ヘッダー、フッター、文書のその他の部分など。
HTML5: <セクション></セクション>
HTML4: <div></div>

<source> タグは、メディア要素 (<video> や <audio> など) のメディア リソースを定義します。
HTML5: <source>
HTML4: <param>

<summary> タグには、details 要素のタイトルが含まれており、「details」要素は、文書または文書フラグメントに関する詳細情報を記述するために使用されます。 「summary」要素は「details」要素の最初の子である必要があります。
HTML5: <details><summary>HTML 5</summary>このドキュメントでは、HTML 5 について学ばなければならないことをすべて説明します。</details>
HTML4: none

<time> は日付または時刻を定義します。 、 または両方。
HTML5: <time></time>
HTML4: <span></span>

<video> は、ムービー クリップやその他のビデオ ストリームなどのビデオを定義します。
HTML5: <video src="movie.ogg" Controls="controls">お使いのブラウザは video タグをサポートしていません。 </video>
HTML4:<object type="video/ogg" data="movie.ogv"><param name="src" value="movie.ogv"></object>

削除された要素

次の HTML 4.01 要素が HTML5 で削除されました。

<ディレクトリ>

<font>

<フレーム>

<フレームセット>

<フレームなし>

<ストライク>

<tt>