HTML5の新しい要素

HTML5の新しい要素

以下に示すHTML5の新しい要素とその説明をリストアップします。

新しい意味/構造要素

HTML5が提供する新しい要素は、より良いドキュメント構造を構築できます：

タグ 説明
<article> ドキュメント内の記事を定義。
<aside> ページ内容以外の内容を定義。
<bdi> 他のテキストとは異なるテキストの方向を定義。
<details> ユーザーが見たり隠したりできる追加の詳細を定義。
<dialog> ダイアログやウィンドウを定義。
<figcaption> <figure>要素のタイトルを定義。
<figure> 図示、グラフ、写真、コードリストなど、自給自足の内容を定義。
<footer> ドキュメントや節のフッターを定義。
<header> ドキュメントや節のヘッダーを定義。
<main> ドキュメントの主内容を定義。
<mark> 重要または強調された内容を定義。
<menuitem> ポップアップメニューから呼び出せるコマンド/メニュー項目を定義。
<meter> 既知の範囲（尺度）内のスケール測定を定義。
<nav> ドキュメント内のナビゲーションリンクを定義。
<progress> タスクの進捗を定義。
<rp> ruby注釈をサポートしないブラウザで表示する内容を定義。
<rt> 東亜字体用の文字の説明/発音を定義。
<ruby> 東亜字体用のruby注釈を定義。
<section> ドキュメント内の節を定義。
<summary> <details>要素の見えるタイトルを定義。
<time> 日付/時間を定義。
<wbr> 可能な折れ線（ラインブレイク）を定義。

さらに詳しく HTML5の意味の内容。

新しいフォーム要素

タグ 説明
<datalist> 入力コントロールのプレデファインドオプションを定義。
<keygen> フォーム用のキーゲネレーターフィールド（キープアゲイン用）を定義。
<output> 計算結果の定義。

さらに詳しく HTML フォームエレメント中新老要素。

新しい入力タイプ

新しい入力タイプ 新しい入力属性
  • 色
  • 日付
  • datetime
  • datetime-local
  • メール
  • 月
  • 数
  • 範囲
  • 検索
  • 電話番号
  • 時間
  • URL
  • 週
  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • 高さと幅
  • リスト
  • min および max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

学習 HTML 入力タイプのすべての新しいおよび古い入力タイプ

学習 HTML Input 属性のすべての入力属性

HTML5 - 新しい属性構文

HTML5は4種類の異なる属性構文を許可しています。

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

タグ 説明
空 <input type="text" value="Bill Gates" disabled>
クォートなし <input type="text" value=Bill>
ダブルクォート <input type="text" value="Bill Gates">
シングルクォート <input type="text" value='Bill Gates'>

HTML5では、属性が必要に応じてこれらの4つの構文を使用する可能性があります。

HTML5 イメージ

タグ 説明
<canvas> JavaScriptを使用する画像描画を定義します。
<svg> SVGを使用する画像描画を定義します。

さらに詳しく HTML5 Canvas の内容。

さらに詳しく HTML5 SVG の内容。

新しいメディア要素

タグ 説明
<audio> 音や音楽の内容を定義します。
<embed> 外部アプリケーションのコンテナ（プラグインなど）を定義します。
<source> <video> と <audio> のソースを定義します。
<track> <video> と <audio> のトラックを定義します。
<video> ビデオや映画の内容を定義します。

さらに詳しく HTML5 ビデオの内容。

さらに詳しく HTML5 オーディオの内容。