[HTML5 入門]コンテンツ・モデルについて勘違いしそうなところ
この記事は約15分ぐらいで読めます
![HTML5のアウトラインについて](http://webcre8.jp/wordpress/wp-content/plugins/lazy-load/images/1x1.trans.gif)
HTML5、難しいですよね。…いやいやそんなことはないですよ!たくさんの要素がありますが、ちょっとづつ理解して行きましょうよ★今回はコンテンツの分類についてです。
こんにちは。結構HTML5のことが好きなのにも関わらずHTML5カンファレンスには行けなかったwebcre8です。悲しいけど前を向いていきます!w イベントについては以下の記事でまとめられています。
HTML5カンファレンス2012の資料まとめ | Stocker.jp / diary
いやー楽しいですよねHTML5。勉強していると、セマンティックなwebというものに自分がドンドン近づいているのを感じます。気のせいかも知れませんけど。まあそれを実際にブログで実行できているかどうかは…一応(未だに)ベータ進行中なので、一旦置いておいてくださいねw
HTML5入門シリーズ
折りしも東京では先日HTML5カンファレンスというイベントが開催され、webで飛び交う話題もそれについてのものがドンドン増えてきています。このブログでもたびたびHTML5のコーディングにおけるややこしい話題を取り扱っていますが、こういった需要はさらに増えていくのではないかなと思っています。
今回からたびたびHTML5入門と題しまして、HTML5を使ってweb制作をしていく上で避けては通れない基礎的な理解を深める為の文章を書いていきます。webcre8もHTML5は絶賛勉強中で、これはいち制作者としてHTML5によるコーディングをどうするべきかを考えた考察の覚書でもあります。間違いがあればガンガンツッコミをお願いします!知識のある人は単に﹁間違っている﹂という指摘だけでなく正しい説明をくれるので最近すごく助かってます。皆で一緒に正しい認識を得られるといいですね!
メタデータ・コンテンツに属する要素
●base
●command
●link
●meta
●noscript
●script
●style
●title
概念と言う事で、基本的にそれをコードに書いたからと言って何か画面に表示されることはありません。﹁帯域外﹂と説明されていますが、metaやlink等、他のコードの定義に関係するようなものばかりですね。
殆どhead内に書くものばかりですし、他のコンテンツとは一線を画しています。
フロー・コンテンツに属する要素
●a
●abbr
●address
●area(map要素の子孫の場合)
●article
●aside
●audio
●b
●bdi
●bdo
●blockquote
●br
●button
●canvas
●cite
●code
●command
●datalist
●del
●details
●dfn
●div
●dl
●em
●embed
●fieldset
●figure
●footer
●form
●h1
●h2
●h3
●h4
●h5
●h6
●header
●hgroup
●hr
●i
●iframe
●img
●input
●ins
●kbd
●keygen
●label
●map
●mark
●math
●menu
●meter
●nav
●noscript
●object
●ol
●output
●p
●pre
●progress
●q
●ruby
●s
●samp
●script
●section
●select
●small
●span
●strong
●style(scoped属性が存在している場合)
●sub
●sup
●svg
●table
●textarea
●time
●u
●ul
●var
●video
●wbr
●テキスト
実に82個と殆どの要素がここに属しています。この中でも特に
●address
●blockquote
●del(例外あり)
●div
●dl
●fieldset
●figure
●footer
●form
●header
●hr
●ins(例外あり)
●map(例外あり)
●menu(例外あり)
●ol
●p
●pre
●style(scoped属性が存在している場合)
●table
●ul
これらのタグはフレージング・コンテンツではない生粋のフローコンテンツと言えるでしょう。端的に言えば、これらはp要素には入れられないタグです。
セクショニング・コンテンツに属する要素
●article
●aside
●nav
●section
HTML5では文書の階層構造はセクショニング・コンテンツが作ります。レイアウトはdiv等で行い、内容を他の各要素でマークアップし、全体の構成が完成します。
ヘッディング・コンテンツに属する要素
●h1
●h2
●h3
●h4
●h5
●h6
●hgroup
フレージング・コンテンツに属する要素
●a(フレージング・コンテンツのみが入れられている場合)
●abbr
●area(map要素の子孫の場合)
●audio
●b
●bdi
●bdo
●br
●button
●canvas
●cite
●code
●command
●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
●textarea
●time
●u
●var
●video
●wbr
●テキスト
エンベッディッド・コンテンツに属する要素
●audio
●canvas
●embed
●iframe
●img
●math
●object
●svg
●video
分かりやすいところで言うならimg、embed等に入っているフラッシュはコンテンツ自体が高さや幅を持っていますよね。
インタラクティブ・コンテンツに属する要素
●a
●audio (controls 属性が存在している場合)
●button
●details
●embed
●iframe
●img (usemap 属性が存在している場合)
●input (type 属性が Hidden 状態でない場合)
●keygen
●label
●menu (type 属性が toolbar 状態の場合)
●object (usemap 属性が存在している場合)
●select
●textarea
●video (controls 属性が存在している場合)
トランスペアレント・コンテンツ・モデルに属する要素
●a
●del
●ins
トランスペアレントはほぼどんなコンテンツでも含むことが出来ます。