HTML5 新要素 変更要素 をざっと
2010.11.28
この記事は最終更新日から1年以上が経過しています。
HTML5 新要素 変更要素をざっと載せてみました。
HTML5
section要素
節や章の単位で使用
article要素
ブログの記事、ニュースサイトの記事のように、それ自身で独立したコンテンツ。
nav要素
ナビゲーションを形成するセクションを表す
ページやサイトにとって主要なナビゲーションに使用。主要であることが大事。
aside要素
補足記事、サイドバー、広告、プル・クォートなどのように、
メインコンテンツとは関連が薄く、切り離すことができると考えられるものに使用。
なくなってしまったらコンテンツとして成り立たなくなるようなものには使うべきじゃない。
hgroup要素
見出しレベルが異なるh1~h6要素だけにマークアップ。
h1~h6要素以外の要素を入れる事は出来ない。
header要素
セクションのヘッダーを表す。
見出しを入れる事は必須ではない。
該当のセクションに関する概要やナビゲーションなどを入れて使用。
サイト内検索、フォームや、ロゴ表示に使用する事も可。
fotter要素
セクションやページのフッターをマークアップするため使用。
ページ内で何回でも使用可。場所で意味が変わる。
（例）body直下 →ページフッターを表す
article要素の直下 →該当のブログ記事に関するフッター情報
address要素
連絡先情報に使用。
該当のページのウェブ管理者の連絡先として使われます。
使う場所によって意味が異なる。
ブログ記事などを表しているarticle要素の中で使用→該当ブログの著者への連絡先情報を意味。
そうでなければ→ページもしくはサイトの連絡先情報
– グループ要素 –
figure要素
キャプション付き図画を表し、自己完結型で、メインコンテンツから参照されるようなコンテンツを表す。
テキストの意味付け要素
em要素(強調)
強調されたテキストの範囲を表します。
strong要素(重要性)【変更要素】
重要性を持つテキストに使用。
small要素(細目)【変更要素】
細目のような注釈に使用。
細目とは、免責条項、警告、法的制約、著作権表記などを説明する法律用語の事です。
time要素(日付と時間)
24時間表記の時刻、新暦のグレゴリオ暦における正確な日付を表す。
曖昧な時点を表す表現に、この要素を使う事はできません。
i要素(イタリック表記が通例のテキスト)【変更要素】
声やムードを表すテキストの範囲や、分類用語、技術用語、多言語のイディオム、
思考、船の名前など、印刷慣例ではよくイタリック体で表現することで、他文章と区別している範囲に使用。
b要素（ボールド表記が通例のテキスト)【変更要素】
太字。まず他にふさわしい要素がないか考える。
他の文章と区別したい場合における、最後の手段。
mark要素(ハイライト)
特定のテキストをハイライトさせる為に使用
ruby要素(ルビ)
ふりがな。Firefox3.6での対応は、まだ。
IE8、Chrome4がレンダリング対応。
rt要素(ルビのテキスト)
ruby要素の中だけで利用することができる。
rp要素(ルビの括弧)
ruby要素に対応していない場合（）をつける。
– 組み込み型コンテンツ要素 –
img要素(イメージ)
HTML5ではgif,jpgだけに限らずpdf,SVGに対応。
altタグ必須では無くなった。代入するときの注意。
タイトルとして入れるのではなく、説明文と入れるのが適切である。
ismapコンテンツ属性
ismap=”ismap”クリックによる座標取得が可能。
http://example.jp/map.cgi?321,223
321がx座標、233がy座標を表す。
logdesc属性は廃止された。
video要素(イメージビデオ)
オートバッファ autibuffer=”autibuffer“
ユーザーがビデオ再生する時にある程度ビデオデータがロード済みとなっている。
posterコンテンツ
このコンテンツ属性に画像ファイルのURLを設置することでポスターフレームをセットする事ができる。
ポスターフレームとｇはビデオ生成の準備が出来る前に表示させてい画像を表す。
例:
<video controls="controls"> <source src="theora_vorbis.ogg" type="video/ogg" /> <source src="h264_aac.mp4" type="video/mp4" /> <p>ご利用のブラウザーでは再生できません。<a href="h264_acc.mp4">こちら</a>からダウンロードして下さい。</p></video>
audio要素（オーディオ）【新要素】
プラグインなしでオーディオの再生が可能
controlsコンテンツ属性をセット。javascriptで再生。
source要素（メディア・ソース）【新要素】
ファイル先をマークアップ。上から順にチェックされ、最初に再生可能と判断されたものだけが、実際に再生される。
canvas要素（動的グラフィック）【新要素】
ファイル先をマークアップ。上から順にチェックされ、最初に再生可能と判断されたものだけが、実際に再生される。
area要素（イメージマップ）
2個目のaltに関しては空で大丈夫。
tbody要素（テーブルの行グループ）
tfoot要素（テーブルのフッター行グループ）
– FORM –
search要素【新タイプ】
検索向けフォーム
tel要素【新タイプ】
電話番号向け用フォーム
url要素【新タイプ】
http://～～又はftp://から始まるURLを受け付ける。
email【新タイプ】
メールアドレス向けのテキストフィールド。
autocomplete【新タイプ】
以前に入力したデータをブラウザーが覚えておき、次回以降、同じフォームにアクセスしたら、
過去に入力したデータの候補を表示してくれる。
datetime【新タイプ】
日付と時間をセットする為のコントロール。
date【新タイプ】
日付をセットする為のコントロール。
month【新タイプ】
年月をセットする為のコントロール。
week【新タイプ】
週をセットする為のコントロール。
time【新タイプ】
時間をセットする為のコントロール。
datetime-local【新タイプ】
タイムゾーンを持たない日付と時間をセットする為のコントロール。
number【新タイプ】
数値をセットする為のコントロール。
range【新タイプ】
日付と時間をセットする為のコントロール。
color【新タイプ】
色をセットする為のコントロール。
multiple【新タイプ】
fileタイプのinput要素にmultipleコンテンツ属性を指定すると複数のファイルを選択できるようになります。
placeholder【新タイプ】
ユーザーに対して、そのテキスト・フィールド
autofocusコンテンツ属性【新タイプ】
ページがロードされたらすぐに、該当のコントロールにフォーカスが当たるように指示する論理属性です。
disabledコンテンツ属性
該当のコントロールを無効にする論理属性です。
このコンテンツ属性は指定されたテキスト・フィールドには文字が入力できず、
また、ボタンであれば、押すことが出来なくなります。
formコンテンツ属性
input要素が表すフォームコントロールを、指定のform要素と結び付けるために使います。
このコンテンツ属性には、結び付けたいform要素のid属性の値を指定します。
datalist要素（入力候補選択）属性
事前に定義しておいた値の候補をリスト形式でユーザーに見せ、
そこから選択できるようにする。
リストから選択できないというわけではなく、テキストフィールドに自由な値を入力することができる。
requiredコンテンツ属性【新属性】
そのtextarea要素が表すテキストエリアに値が必須がどうかを指定する論理属性です。
keygen要素（鍵ペア生成）【新属性】
フォームをサブミットする際に鍵を生成するコントロール。
フォームをサブミットされると秘密鍵と公開鍵を生成し、秘密鍵はブラウザー側に保存され、
公開鍵はサーバー側に送信される。
output要素（フォームの計算結果）【新属性】
何かしらの計算結果を表します。
progress要素（進捗）【新属性】
タスクの進捗を表します。プログレスバーなどが挙げられます。
meter要素（ゲージ）【新属性】
限定された範囲における値を表したい場合に使用。
最小値と最大値が必須となってくる。valueも必須となってくる。
details要素（オンデマンドの詳細情報）【新属性】
ディスクロージャー・ウィジェットを表します。
ディスクロージャー・ウィジェットとは、ユーザーに操作によって、詳細情報を表示、
非表示することが出来る、ユーザーインターフェイスの事を言う。
summary要素（オンデマンドの詳細情報）【新属性】
ディスクロージャー・ウィジェットの要約、キャプション、説明を表します。
summary要素はdetails要素の最初の子要素として使用しないといけない。
command要素（コマンド）【新属性】
ユーザーが呼び出すことができるコマンドを表す。menu要素の子要素で使用。
javascriptで処理を実行する。
menu要素（コマンドのリスト）【変更要素】
コマンドのリストを表します。
まだまだあると思われますが、
取り敢えず、ざっと載せてみました！！
