HTML5 新規要素

❮ 前章へ 次章へ ❯

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> 可能な改行を定義します

詳細は、HTML5 セマンティックをご覧ください。

新規フォーム要素

タグ 説明
<datalist> 入力コントロール用に定義済みの選択肢を定義します
<keygen> キーペア生成フィールドを定義します（フォーム用に）
<output> 計算の結果を定義します

全ての新旧フォーム要素については、HTML フォーム要素をご覧ください。

新規 Input タイプ

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

全ての新旧 input タイプについて学習するには、HTML Input タイプをご覧ください。

全ての input 属性について学習するには、HTML Input 属性をご覧ください。

HTML5 - 新しい属性の構文

HTML5 では、属性に 4 種類の構文が使用できます。

この例は、<input> タグで使用できる様々な種類の構文を示しています：

タイプ 例
空(Empty) <input type="text" value="John" disabled>
引用符なし <input type="text" value=John>
二重引用符 <input type="text" value="John Doe">
単一引用符 <input type="text" value='John Doe'>

HTML5 では、属性に必要とされるものに応じて、4つのすべての構文を使用することができます。

HTML5 グラフィックス

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

詳細は、HTML5 Canvas をご覧ください。

詳細は、HTML5 SVG をご覧ください。

新規メディア要素

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

詳細は、HTML5 Video をご覧ください。

R詳細は、HTML5 Audio をご覧ください。




❮ 前章へ 次章へ ❯