HTML5 の新しい要素

HTML5 の新しい要素

1999年以降、HTML 4.01 は大きく変化してきました。今日では、HTML 4.01 で使用されていたいくつかの要素が廃止され、HTML5 ではこれらの要素が削除または再定義されています。

現代のインターネットアプリケーションにうまく対処するために、HTML5 は多くの新しい要素と機能を追加しました。例えば、グラフィック描画、マルチメディアコンテンツ、より良いページ構造、フォーム処理、いくつかのAPI(ドラッグ&ドロップ、位置情報、ウェブアプリケーションキャッシュ、ストレージ、ウェブワーカーなど)があります。

<canvas> 新要素

タグ 説明
<canvas> グラフィックを定義します。例えば、チャートや他の画像をJavaScriptのAPIを利用して描画します。

新しいマルチメディア要素

タグ 説明
<audio> 音声コンテンツを定義します。
<video> ビデオ(ビデオまたはムービー)を定義します。
<source> <video>や<audio>のメディアリソースを定義します。
<embed> プラグインのような埋め込みコンテンツを定義します。
<track> <video>や<audio>要素のための外部テキストトラックを定義します。

新しいフォーム要素

タグ 説明
<datalist> 選択リストを定義します。<input>要素と組み合わせて使用することで、入力項目の候補値を提供します。
<keygen> フォームのための鍵ペア生成器フィールドを定義します。
<output> スクリプトの出力など、異なるタイプの出力を定義します。

新しいセマンティックおよび構造要素

HTML5には、より良いページ構造を作成するための新しい要素が含まれています:

タグ 説明
<article> 独立したコンテンツ領域を定義します。
<aside> ページのサイドバーコンテンツを定義します。
<bdi> 親要素のテキスト方向設定から独立したテキストを設定することを許可します。
<command> コマンドボタン(ラジオボタン、チェックボックス、ボタンなど)を定義します。
<details> ドキュメントまたはドキュメントの一部の詳細を記述します。
<dialog> プロンプトなどのダイアログボックスを定義します。
<summary> <details>要素のタイトルを含みます。
<figure> 独立した流れのコンテンツを規定します(画像、チャート、写真、コードなど)。
<figcaption> <figure>要素のキャプションを定義します。
<footer> セクションまたはドキュメントのフッターを定義します。
<header> ドキュメントのヘッダー領域を定義します。
<mark> マークされたテキストを定義します。
<meter> 既知の最大値と最小値を持つ計測を定義します。
<nav> ナビゲーションリンクの部分を定義します。
<progress> タスクの進捗を定義します。
<ruby> ルビ注釈(中国語の注音や日本語のふりがな)を定義します。
<rt> 文字(中国語の注音や日本語のふりがな)の解釈や発音を定義します。
<rp> ルビ注釈の中で使用され、ルビ要素をサポートしていないブラウザに表示される内容を定義します。
<section> ドキュメント内のセクション(区切り)を定義します。
<time> 日付や時間を定義します。
<wbr> テキスト内で改行が適切な場所を指定します。

削除された要素

以下のHTML 4.01要素は、HTML5で削除されました:

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>

Q&A

Q1: HTML5における<canvas>要素の主な用途は何ですか?

A1: <canvas> 要素は、JavaScriptのAPIを用いてグラフィックを描画するために使用されます。例えば、チャートやその他の画像を描画することができます。

Q2: HTML5で新しく追加されたマルチメディア要素にはどんなものがありますか?

A2: HTML5で新しく追加されたマルチメディア要素には、<audio>、<video>、<source>、<embed>、<track> があります。

Q3: HTML5で削除された要素にはどんなものがありますか?

A3: HTML5で削除された要素には、<acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<frameset>、<noframes>、<strike>、<tt> などがあります。