このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

HTML5 新要素 変更要素 をざっと

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を設置することでポスターフレームをセットする事ができる。
ポスターフレームとgはビデオ生成の準備が出来る前に表示させてい画像を表す。

例:

<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要素(コマンドのリスト)【変更要素】
コマンドのリストを表します。

まだまだあると思われますが、
取り敢えず、ざっと載せてみました!!


Comment

Related Article

iPhone5s,5c 発表!! という訳でAppleサイトの仕様とかについて

2013.09.15

HTML5 History APIについて

2013.02.26

FlashをCanvas等に変換 gree/LWF(Lightweight SWF)を使ってみました。その2

2013.02.11

FlashをCanvas等に変換 gree/LWF(Lightweight SWF)を使ってみました。

2013.02.11

HTML5 Webストレージでデータを保存 その6 複数保存(なんちゃってソーシャルゲーム・quest進捗、ex調整)

2013.02.10

HTML5 Webストレージでデータを保存 その5(なんちゃってソーシャルゲーム・Lv、Gold編)

2013.02.09

HTML5 Webストレージでデータを保存 その4(なんちゃってソーシャルゲーム・ゲージ)

2013.02.09

HTML5 Webストレージでデータを保存 その3(クエスト進行CSS3アニメーション)

2013.02.08

HTML5 Webストレージでデータを保存 その2(なんちゃってソーシャルゲーム作成)

2013.01.22

HTML5 Webストレージでデータを保存

2013.01.20

CATEGORY LIST

LATEST NEWS

iPad Air で、Web開発環境構築(iSH Alpine使用)

mac

2021.04.11

【Qt】Mac開発 ソートダイアログ (拡張するダイアログ)を作成

C++

2021.04.01

M1 (Appleシリコン)Macで Widowsアプリを起動

mac

2021.03.27

M1(Appleシリコン)Macで、ファミコンソフトプログラミング。 サクッと開発環境準備編

Game

2021.03.21

iPad Air 2020を購入しちゃった件。

mac

2021.03.14

眠っているラズベリーパイをネットワークオーディオ化 Volumio2 インストール手順

RaspberryPi

2021.03.12

ラズベリーパイ 5インチDSIタッチスクリーン ディスプレイを使う。

RaspberryPi

2021.01.11

今年読んで良かった書籍は、「Go言語でつくるインタプリタ」でした。

イベント

2020.12.31

【Qt】Macの、Qt Creatorで Dialog GUI作成

C++

2020.12.29

【Qt】Macで、Qt Creatorをbrew installしてサクッと起動する。

C++

2020.12.14

Macで、Qt5 開発 QPushButton、QSliderなどウィジェット作成

C++

2020.12.13

M1搭載 Mac miniをついにポチった件。Appleさんに翻弄される日々の記録。

mac

2020.12.06

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US