HTML5 の新しい要素

新しい HTML5 要素とその説明を以下に示します。

新しい意味論的/構造的要素

HTML5 では、ドキュメント構造を改善するための新しい要素が提供されています。

ラベル 説明
<article> ドキュメント内の記事を定義します。
<aside> ページコンテンツの外側のコンテンツを定義します。
<bdi> 他のテキストとは異なるテキストの方向を定義します。
<details> ユーザーが表示または非表示にできる追加の詳細を定義します。
<dialog> ダイアログまたはウィンドウを定義する。
<figcaption> <figure> 要素のタイトルを定義します。
<figure> 図、ダイアグラム、写真、コードリストなどの自己完結型コンテンツを定義します。
<footer> ドキュメントまたはセクションのフッターを定義します。
<header> ドキュメントまたはセクションのヘッダーを定義します。
<main> ドキュメントの主な内容を定義する。
<mark> 何が重要または強調されているかを定義します。
<menuitem> ユーザーがポップアップ メニューから呼び出せるコマンド/メニュー項目を定義します。
<meter> 既知の範囲 (スケール) にわたるスカラー測定値を定義します。
<nav> ドキュメント内のナビゲーション リンクを定義します。
<progress> タスクの進行状況を定義する。
<rp> ルビ注釈をサポートしていないブラウザで何を表示するかを定義します。
<rt> 文字に関する解釈/発音の定義 (東アジアのフォントの場合)。
<ruby> ルビ注釈の定義 (東アジアのフォント用)。
<section> ドキュメント内のセクションを定義する。
<summary> <details> 要素の表示されるタイトルを定義します。
<time> 日付/時刻を定義する。
<wbr> 可能な改行を定義する(line-break)。

新しいフォーム要素

ラベル 説明
<datalist> は、入力コントロールの事前定義されたオプションを定義します。
<keygen> はキー ペア ジェネレーター フィールド (フォーム用) を定義します。
<output> は計算結果を定義します。

新しい入力タイプ

新しい入力タイプ 新しい入力属性
  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height 和 width
  • list
  • min 和 max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

HTML5 - 新しい属性構文

HTML5 では 4 つの異なる属性構文が使用できます。

この例は、<input> タグで使用されるさまざまな構文を示しています。

ラベル 説明
Empty <input type="text" value="Bill Gates" disabled>
Unquoted <input type="text" value=Bill>
Double-quoted <input type="text" value="Bill Gates">
Single-quoted <input type="text" value='Bill Gates'>

HTML5 では、属性に必要なものに応じて、4 つの構文すべてを使用できます。

HTML5 画像

ラベル 説明
<canvas> は JavaScript を使用した画像描画を定義します。
<svg> は SVG を使用して描画された画像を定義します。

新しいメディア要素

ラベル 説明
<audio> はサウンドまたは音楽コンテンツを定義します。
<embed> 外部アプリケーション (プラグインなど) のコンテナを定義します。
<source> <video> と <audio> のソースを定義します。
<track> <video> と <audio> のトラックを定義します。
<video> ビデオまたは映画コンテンツを定義します。