最新のWeb開発のチュートリアル

HTML5の新しい要素

❮前 次の章❯

HTML5の新しい要素

1999年以来、HTML 4.01は、多くのことを変更しました。 今日では、HTML 4.01のいくつかは、推奨されており、これらの要素は、HTML5で削除または再定義されています。

ウェブアプリケーションを含むグラフィックスレンダリング、マルチメディアコンテンツ、より良いページ構造、処理のより良い形、およびいくつかのAPIドラッグ＆ドロップ要素、ポジショニング、：より良いハンドル、今日のインターネットアプリケーションのためには、HTML5のような、新しい要素および機能の多くを追加しますキャッシング、ストレージ、ウェブワーカーなど。

HTML5の新要素

以下は、新しいHTML5要素のリスト、および彼らが使用されているものの説明があります。

新しいセマンティック/構造要素

HTML5は、よりよい文書構造のための新しい要素を提供しています：

タグ 説明
<article> 文書の資料を定義します
<aside> ページコンテンツとは別にコンテンツを定義します
<bdi> 他のテキストとは異なる方向にフォーマットされるかもしれないテキストの一部を定義します
<details> ユーザーが表示または非表示にすることができます追加の詳細を定義します
<dialog> ダイアログボックスまたはウィンドウを定義します
<figcaption> キャプションを定義し<figure>要素
<figure> などのイラスト、図表、写真、コードリストのように、自己完結型のコンテンツを定義します
<footer> 文書またはセクションのフッターを定義します
<header> 文書またはセクションのヘッダーを定義します
<main> 文書の主な内容を定義します
<mark> マークされたか、ハイライトされたテキストを定義します
<menuitem>  ユーザーは、ポップアップメニューから呼び出すことができ、コマンド/メニュー項目を定義します
<meter> 既知の範囲内のスカラー測定を定義する(a gauge)
<nav> ドキュメント内のナビゲーションリンクを定義します
<progress> タスクの進捗状況を定義します
<rp> サポートしていないブラウザに表示するかを定義ruby注釈を
<rt> （東アジアのタイポグラフィのための）文字の説明/発音を定義します
<ruby> 定義ruby注釈を(for East Asian typography)
<section> 文書内のセクションを定義します
<summary> 以下のための可視な見出しを定義します<details>要素
<time> 日付/時間を定義します
<wbr> 可能な改行を定義します

詳細については読むHTML5セマンティクスを 。

新しいフォーム要素

タグ 説明
<datalist> 入力コントロールのための事前定義されたオプションを定義します
<keygen> 鍵ペアジェネレータフィールドを定義します(for forms)
<output> 計算の結果を定義します

中に古いものと新しいフォーム要素についてのすべてを読んでHTMLフォーム要素 。

新しい入力タイプ

新しい入力タイプ 新しい入力属性
  • 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

すべての古いと新しい入力タイプについて学ぶHTML入力タイプ 。

入力の属性についてのすべてを学ぶHTMLの入力属性 。

HTML5 - 新しい属性の構文

HTML5は、属性のための4つの異なる構文を可能にします。

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

タイプ 例
空の <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キャンバスを 。

詳細については読むHTML5 SVGを 。

ニューメディアの要素

タグ 説明
<audio> 音や音楽コンテンツを定義します
<embed> 外部アプリケーションのためのコンテナを定義します(like plug-ins)
<source> 以下のためのソースを定義します<video>と<audio>
<track> 以下のためのトラックを定義します<video>と<audio>
<video> ビデオや映画のコンテンツを定義します

詳細については読むHTML5のビデオを 。

詳細については読むHTML5オーディオを 。

❮前 次の章❯