HTML5の要素
HTML5では、文書構造を明確化する要素(Sectionなど)や動画や音声を扱う要素(Videoなど)、入力フォームの属性強化(電話番号などの入力タイプの追加など)など多くの要素や属性が追加されました。
また、従来の要素についても属性等の変更や廃止予定のものも存在します。
※以下の【属性の変更】は主に追加されるものを示します。
ルート要素
HTMLドキュメントの全体を示すhtml要素です。
新要素はありませんが、新属性が追加されました。
従来の要素
html
【属性の変更】
- <html>
- 【追加】manifest属性
-
アプリケーション・キャッシュとして、HTML文書とは別に用意したmanifestファイルのURIを指定します。
詳しくはアプリケーションキャッシュ 参照。
文書のメタデータの要素
コンテンツの表示や動作を定義したり、他のドキュメントとの関連性、その他のドキュメントの情報を定義する要素です。
新要素はありませんが、属性の変更がありました。
従来の要素
head,title,base,link,meta,style
【属性の変更】
- <meta>
- 【追加】name属性の値「application-name」
-
Webアプリケーションの名前を示すものです。
ページがWebアプリケーションでない場合には使用してはいけません。
また、使用する場合には一つの文書に一つだけ指定します。
- <style>
- 【追加】scoped属性
-
指定すると文書全体ではなく、style要素の親要素、および、その子孫要素に対してのみスタイルが適用されます。
スクリプトの要素
ドキュメントに動的なスクリプトやデータブロックを示す要素です。
新要素はありません。
従来の要素
script,noscript
文書構造の明確化の要素
HTMLはマークアップ言語であり、HTML4以前でも文書構造を示すことはできました。
その際、要素をグループ化するには、div要素を使って行ってきました。
しかし、id属性やclass属性で区別はしていましたが、全てdiv要素であるため、要素だけでは文書構造の区別がつきませんでした。
HTML5では、文書構造を表す新しい要素が加わることで、ブラウザや検索エンジンに対してより明確に文書構造を伝えられるようになります。
詳細については、「
文書構造の明確化」を参照してください。
【新要素】
- <section>
- 章や節など、文書的な意味のひとまとまり
- <nav>
- ナビゲーション(目次など)
- <article>
- 自己完結する文書(記事やブログのエントリなど)
- <aside>
- 主題から離れた箇所(余談や補足など)
- <hgroup>
- 見出しのグループ
- <header>
- イントロダクション(導入部)やナビゲーション(目次など)となるグループ
- <footer>
- フッター(脚注など)、その文書に関する情報となるグループ
従来の要素
body,h1～h6,address
コンテンツのグループ化の要素
主に段落や箇条書きなどコンテンツ(内容)のまとまりを表します。
【新要素】
- <figure>
-
図表の要素
文書の本文（メインフロー）から参照されるようなイラスト・図・写真・ソースコードなどです。
リスト1. figure要素、figcaption要素の記述例
<p>
ここで説明する内容を<a href="#fig1">図 a</a>に示します。
</p>
<figure id="fig1">
<img src="..." />
<figcaption>図 a</figcaption>
</figure>
- <figcaption>
-
図表のキャプション
<figure>～</figure>の中に配置すると、図表にキャプションを付けることができます。
※上記 リスト1 参照
従来の要素
p,hr,pre,blockquote,ol,ul,li,dl,dt,dd,div
【属性の変更】
- <ol>
- 【追加】reversed属性
-
リストの並び順を逆順（大きい順）にすることができます。
現在(2011.5月) サポートしているブラウザはありません。
テキストの意味づけの要素
コンテンツ(内容)のテキストに意味や振る舞いを定義します。
【新要素】
- <time>
-
日付や時刻の要素
日付や時刻を表記する際に、グレゴリオ暦による日付や24時間表記の時刻で正確に示す際に使用します。
コンピュータやブラウザが理解できるように日時を示すことが目的です。
datetime属性は、日付や時刻を指定します。もし、datetime属性を省略する場合には、<time>～</time>の中に日付や時刻を記述します。
pubdate属性を指定すると、<time>で示した日時が親要素の<article>または、文書全体の公開日時の公開日時であることを表します。
リスト2. time要素の記述例
<p>
<time datetime="2011-3-11">あの日</time>、日本に大きな変化が訪れました。
<time>14:46:18</time> その時まではいつもの金曜日でした。しかし...
</p>
- <mark>
-
文書内の目立たせたい要素
文書内の該当テキストをハイライトして目立たせる際に使用します。
強調することが目的ではなく、ユーザーが参照しやすいように目立たせることが目的です。
リスト3. mark要素の記述例
<h2><em>HTML5</em> の検索結果</h2>
<p>
HTML4までは、論文のような文書主体のものを機械での上手く扱うことを
主な用途として作られており、必ずしも「アプリケーション」を作るのには
適しませんでした。
XHTMLはブログやCMSの普及に伴い広まりましたが、機械での生成には適する
ものの厳密なXHTMLドキュメントを作成することは難しいものがありました。
そこで、<mark>HTML5</mark>ではHTML4とXHTML1.0を統合しつつ、
多くの変更を加えたHTMLの新しいバージョンです。
</p>
- <ruby>
-
ルビをふる要素
ルビをふる際に使用します。
IE5以降で先行採用されていますが、HTML5では標準仕様となります。
リスト4. ruby要素の記述例
<ruby>
<ruby>漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby>の
<ruby>振り仮名<rp>(</rp><rt>ふりがな</rt><rp>)</rp></ruby>をふります。
</ruby>
- <rt>
-
ルビのテキスト要素
※上記 リスト4 参照
- <rp>
-
ルビの囲む記号要素
※上記 リスト4 参照
- <wbr>
-
改行可能位置を示す要素
リスト5. wbr要素の記述例
<h2>wbrなし</h2>
<p>
abcdefghijklmnopqrstubwxyz1234567890abcdefghijklmnopqrstubwxyz1234567890
abcdefghijklmnopqrstubwxyz1234567890
</p>
<h2>wbrあり</h2>
<p>
abcdefghijklmnopqrstubwxyz1234567890<wbr>
abcdefghijklmnopqrstubwxyz1234567890<wbr>
abcdefghijklmnopqrstubwxyz1234567890
</p>
従来の要素
a,em,strong,small,s,cite,q,dfn,abbr,code,var,samp,kbd,sub,sup,i,b,bdi,bdo,span,br
訂正の要素
追加された箇所、削除された箇所を定義する要素
新要素はありません。
※p要素を入れることが可能になるなど、取り扱いが変更になりました。
従来の要素
ins,del
組み込み要素
ドキュメントに他のリソースを組み込む要素
画像(img)、動画(video)、音声(audio)、図形(canvas、svg)、数式(math)など他のリソースによって表示するものです。
【新要素】
- <embed>
-
プラグインデータを埋め込む要素
外部アプリケーションやインタラクティブなコンテンツ、例えば、Flashなどのプラグインを必要とするデータをHTML文書に埋め込む際に使用します。
src属性は、データのURLを指定する際に使用します。
type属性は、MIMEタイプを指定する際に使用します。
width属性は、幅を指定する際に使用します。
height属性は、高さを指定する際に使用します。
リスト6. embed要素の記述例
<embed src="sample.swf" width="400" height="300">
- <audio>
-
音声を再生する要素
<img>同様に音声を再生する際に使用します。
詳細については、「動画や音声を扱う」を参照してください。
- <video>
-
動画を再生する要素
<img>同様に動画を再生する際に使用します。
詳細については、「動画や音声を扱う」を参照してください。
- <source>
-
音声や動画のソースを指定する要素
動画や音声などのメディアファイルのURLや種類を指定する際に使用します。
<audio>～</audio>や<video>～</video>などのメディア要素の中で子要素として使用します。
詳細については、「動画や音声を扱う」を参照してください。
- <canvas>
-
図形を描く要素
ブラウザだけで図形を描く際に使用します。
Flashなどのプラグインデータを埋め込む無しに、標準のHTMLやJavaScriptだけで、グラフやゲームグラフィックスなどの図形をすばやく表示できるようになります。
詳細については、「ブラウザだけで図形を描く」を参照してください。
従来の要素
img,iframe,object,param,map,area,MathML,SVG
【属性の変更】
- <iframe>
- 【追加】srcdoc属性
-
フレーム表示する内容を属性値として指定する際に使用します。
- 【追加】sandbox属性
-
悪意あるコンテンツから被害を受けるのを避けるために、フレーム内コンテンツの表示に制限を加える際に使用します。
- 【追加】seamless属性
-
フレーム内のコンテンツを、あたかも親ページの一部のように表示させる際に使用します。
- <object>
- 【追加】form属性
-
フォーム要素と関連付ける場合に指定する際に使用します。
- <area>
- 【追加】hreflang属性
-
ハイパーリンク先の言語を指定する際に使用します。
- 【追加】media属性
-
ハイパーリンク先のメディアを指定する際に使用します。
- 【追加】rel属性
-
ハイパーリンク先との関係を指定する際に使用します。
- 【追加】type属性
-
ハイパーリンク先のMIMEタイプを指定する際に使用します。
表組み要素
表組み(テーブル)を表す要素
新要素はありません。
※theadやtfootの表示順が明確になりました。
従来の要素
table,caption,colgroup,col,tbody,thead,tfoot,tr,td,th
フォーム要素
フォーム関連の新しい属性が多数追加されており、入力補助や入力チェックなどの機能が充実しています。
これまでJavaScriptを必要としていた機能が、新しい属性で簡単に指定できるようになります。
詳細については、「
フォームの強化」を参照してください。
【新要素】
- <datalist>
- 入力候補となるデータリストを定義
- <keygen>
- フォーム送信時にキーを発行
- <output>
- 計算結果
- <progress>
- タスク完了までの進行状況
- <meter>
- 規定範囲内の測定値
従来の要素
form,fieldset,legend,label,input,button,select,optgroup,option,textarea
【属性の変更】
※type属性などに大幅な変更があります。
詳細については、「フォームの強化」を参照してください。
インターラクティブ要素
ユーザーが利用可能な詳細情報やコントロールを付加するために要素群です。
HTML5から新たに導入されました。
【新要素】
- <details>
-
解説・詳細情報の要素
ユーザーが追加で得ることのできる備考や操作手段などの詳細情報であることを示す際に使用します。
リスト7. details要素、summary要素の記述例
<section>
<p>
HTML5では新要素がいくつか追加されています。
</p>
<h2> details要素 </h2>
<details><!-- 解説であることを明確にします -->
<summary>解説・詳細情報の要素</summary><!-- 概要を示します -->
<p>
ユーザーが追加で得ることのできる備考や操作手段などの詳細情報であることを
示す際に使用します。
</p>
</details>
</section>
- <summary>
-
内容の要約
<details>～</details>の中に配置すると、要素内容の要約・キャプション・説明を表します。
※上記 リスト7 参照
- <menu>
-
操作メニューの要素
操作メニューを作成する際に使用します。
サブメニューをメインメニューで入れ子にして、階層メニューにすることもできます。
<menu>～</menu>で囲うことにより、操作メニューの範囲であることを明示します。
type属性は、宣言するメニューの種類を指定します。
context（コンテキストメニュー）、toolbar（ツールバー）、list（リスト状態 省略時）
label属性は、メニューにラベル（項目名）を付けます。
※現在(2011.5月)、対応するブラウザはありません。
command要素と組み合わせてブラウザのメニューを作成する場合にも使います。
リスト8. menu要素、command要素の記述例
<h2> メニューツリー </h2>
<menu label="メニュー">
<li>メニュー1</li>
</menu>
<h2> ツールバー </h2>
<menu label="ツールバー" type="toolbar">
<button id="btn1">処理1</button>
<button id="btn2">処理2</button>
<button id="btn3">処理3</button>
</menu>
<h2> コマンドメニュー </h2>
<menu label="コマンドメニュー" type="toolbar">
<command type="radio" radiogroup="valign" checked="checked"
label="上" icon="images/top.png" onclick="setVA('top')">
<command type="radio" radiogroup="valign" checked="checked"
label="中" icon="images/middle.png" onclick="setVA('middle')">
<command type="radio" radiogroup="valign" checked="checked"
label="下" icon="images/bottom.png" onclick="setVA('bottom')">
</menu>
- <command>
-
操作メニューの各コマンドを指定する要素
<menu>～</menu>で全体が操作メニューであることを定義して、その子要素として<command>を配置してユーザーが呼び出すことのできる各コマンドを指定します。
type属性は、コマンドの種類を指定します。
command（通常のコマンド）、checkbox（選択式）、radio（択一式）
初期値はcommandです。
label属性は、必須属性です。コマンドにラベル（項目名）を付けます。
icon属性は、コマンドを表す画像を指定します。
disabled属性は、コマンドを使用不能にします。
checked属性は、type属性が"checkbox"または"radio"の時、選択した状態にします。
radiogroup属性は、type属性が"radio"の時、コマンドグループに名前を付けます。
label属性は、コマンドのヒント(ツールチップ)をつけます。
※上記 リスト8 参照
※現在(2011.5月)、対応するブラウザはありません。