Adobe MAX 2013で行った「Architecting a PhoneGap Application」セッションをベースにADC MEETUP 07イベント用に再構成したした内容になります。
※スライドに使われたサンプルは以下のURLからダウンロードできます。
http://www.mitsue.co.jp/knowledge/resources/2013/adc_retweet07_architecting.zip
23. 4-1. コンテンツモデルによる要素分類
1. メタデータ・コンテンツ
(Metadata content)
http://www.w3.org/TR/html5/dom.html#metadata-content
http://www.html5.jp/tag/models/index.html#metadata-content-0
設定系要素
!
base link meta noscript script style template title
24. 4-1. コンテンツモデルによる要素分類
2. フロー・コンテンツ
(Flow content)
http://www.w3.org/TR/html5/dom.html#flow-content
http://www.html5.jp/tag/models/index.html#flow-content-1
本文格納系
a abbr address area (if it is a descendant of a map element) article aside
audio b bdi bdo blockquote br button canvas cite code data datalist del
dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6
header hr i iframe img input ins kbd keygen label main map mark math
meter nav noscript object ol output p pre progress q ruby s samp script
section select small span strong sub sup svg table template textarea time
u ul var video wbr text
27. 4-1. コンテンツモデルによる要素分類
5. フレージング・コンテンツ
(Phrasing content)
http://www.w3.org/TR/html5/dom.html#phrasing-content
http://www.html5.jp/tag/models/index.html#phrasing-content-1
文章系
!
a abbr area (if it is a descendant of a map element) audio b bdi bdo br
button canvas cite code data datalist del dfn em embed i iframe img input
ins kbd keygen label map mark math meter noscript object output
progress q ruby s samp script select small span strong sub sup svg
template textarea time u var video wbr text
28. 4-1. コンテンツモデルによる要素分類
6. エンベッデッド・コンテンツ
(Embedded content)
http://www.w3.org/TR/html5/dom.html#embedded-content
http://www.html5.jp/tag/models/index.html#embedded-content-2
外部リソース系
!
audio canvas embed iframe img math object svg
video
29. 4-1. コンテンツモデルによる要素分類
7. インタラクティブ・コンテンツ
(Interactive content)
http://www.w3.org/TR/html5/dom.html#interactive-content
http://www.html5.jp/tag/models/index.html#interactive-content-0
インタラクション系
!
a audio (if the controls attribute is present) button embed iframe img (if
the usemap attribute is present) input (if the type attribute is not in the
hidden state) keygen label object (if the usemap attribute is present)
select textarea video (if the controls attribute is present)
31. 4-2. 要素タイプによる分類
1. ルート要素 (The root element)
html
2. メタデータ要素 (Document
metadata)
head title base link meta style
32. 4-2. 要素タイプによる分類
3. セクション要素 (Sections)
body article section nav aside h1~h6 header
footer address
4. グルーピング要素 (Grouping
content)
p hr pre blockquote ol ul li dl dt dd figure
figcaption div main
33. 4-2. 要素タイプによる分類
5. セマンティックテキスト要素 (Text-level
semantics)
a em strong small s cite q dfn abbr data time
code var samp kbd sub sup i b u mark ruby
rb rt rtc rp bdi bdo span br wbr
34. 4-2. 要素タイプによる分類
6. エディット要素 (Edits)
ins del
7. 組み込み要素 (Embedded
content)
img iframe embed object param video audio
source track map area
37. 4. HTML5要素の役割
HTML属性
グローバル属性 (Grobal attributes)
accesskey class contenteditable contextmenu
dir draggable dropzone hidden id lang
spellcheck style tabindex title
46. 5. HTML5実装
利用頻度の高い要素
要素役割
div − (汎用ブロック) division
span − (汎用インライン) span
p 段落 paragraph
a ハイパーリンク anchor
img 画像 image
br 改行 breake
hr 水平線 horizontal rule
ul 順序なしリスト unordered list
li リスト list
dl 定義リスト difinition list
dt 定義リストタイトル difinition list title
dd 定義リストデータ difinition list data
h1〜6 見出し heading
※ 上記以外にtable、form系要素など機能的な要素群
47. 5. HTML5実装
利用頻度の高いhtml5新設要素
要素役割
header ヘッダー header
footer フッター footer
nav ナビゲーション navigation
article 記事 article
section 章 section
aside その他 aside
main メイン main