WebBox norijin note
WebBox norijin
Category: スポンサー広告  

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

TOP > スポンサー広告 > HTML5入門:コンテンツモデルとカテゴリー!!基礎知識編 vol.3

Category: HTML5   Tags: HTML5  コンテンツモデル  カテゴリー  

HTML5入門:コンテンツモデルとカテゴリー!!基礎知識編 vol.3

HTML5入門:コンテンツモデルとカテゴリー!!基礎知識編 vol.3

HTML5入門:コンテンツモデルカテゴリー!!!!基礎知識 vol.3 として、今日は、「コンテンツモデルカテゴリー」について勉強していきます。一緒に勉強していきましょう...



HTML5入門:コンテンツモデルカテゴリー



 コンテンツモデル(内容モデル)とは、各要素がその中に入れることのできるコンテンツを定義したものです。

 HTML4.01やXHTML1.0では、要素の多くは「ブロックレベル要素」と「インライン要素」に分類され、この概念によって要素同士の関係性が規定されました。

 HTML5は、ブロックレベル要素やインライン要素といった分類方法の代わりに「カテゴリー」という概念を導入しました。カテゴリーによって、要素はより細かく、厳密に分類されるようになり、コンテンツモデルも基本的にこのカテゴリーに基づいて定義されています。

 おもなカテゴリーは次の通りです。
  • メタデータ・コンテンツ
  • フロー・コンテンツ
  • セクショニング・コンテンツ
  • 見出しコンテンツ
  • フレーシング・コンテンツ
  • 埋め込みコンテンツ
  • インタラクティブ・コンテンツ

 カテゴリー同士、おおよそ次のような関係になっています。



HTML5入門:コンテンツモデルとカテゴリー!!

HTML5入門:コンテンツモデルとカテゴリー!!メタデータ・コンテンツ

 文書に関する情報や、他の文書との関係などを定義するコンテンツです。

aabbraddressarea
articleaside
audiobbacebdoblockpuotebody
brbuttoncanvascaptioncitecode
colcolgroupcommanddatalistdddel
detailsdfndivdldtem
embedfieldsetfigcaptionfigurefooterform
h1~h6headheaderhgrouphrhtml
iiframeimginputinskbd
keygenlabellegendlilinkmap
markmenumetameternavnoscript
objectoloptgroupoptionoutputp
parampreprogressqrprt
rubyssampscriptsectionselect
smallsourcespanstrongstylesub
summarysuptabletbodytdtextarea
tfootththeardtimetitletr
ulvarvideowbrテキスト


HTML5入門:カテゴリー!!フロー・コンテンツ

 文書内に現れる一般的なコンテンツを表します。メタデータ・コンテンツに含まれる一部の要素をのぞき、ほとんどの要素がフロー・コンテンツに属しています。

aabbraddressarea
articleaside
audiobbacebdoblockpuotebody
brbuttoncanvascaptioncitecode
colcolgroupcommanddatalistdddel
detailsdfndivdldtem
embedfieldsetfigcaptionfigurefooterform
h1~h6headheaderhgrouphrhtml
iiframeimginputinskbd
keygenlabellegendlilinkmap
markmenumetameternavnoscript
objectoloptgroupoptionoutputp
parampreprogressqrprt
rubyssampscriptsectionselect
smallsourcespanstrongstylesub
summarysuptabletbodytdtextarea
tfootththeardtimetitletr
ulvarvideowbrテキスト
※area...map要素の中にある場合
※style...scoped属性が指定されている場合

HTML5入門:カテゴリー!!セクショニグ・コンテンツ

 章や節、コラムやブログの記事のように、見出しからその内容までを含んだある範囲を定義するコンテンツです。

aabbraddressarea
articleaside
audiobbacebdoblockpuotebody
brbuttoncanvascaptioncitecode
colcolgroupcommanddatalistdddel
detailsdfndivdldtem
embedfieldsetfigcaptionfigurefooterform
h1~h6headheaderhgrouphrhtml
iiframeimginputinskbd
keygenlabellegendlilinkmap
markmenumetameternavnoscript
objectoloptgroupoptionoutputp
parampreprogressqrprt
rubyssampscriptsectionselect
smallsourcespanstrongstylesub
summarysuptabletbodytdtextarea
tfootththeardtimetitletr
ulvarvideowbrテキスト


HTML5入門:カテゴリー!!見出しコンテンツ

 見出しを表します。

aabbraddressarea
articleaside
audiobbacebdoblockpuotebody
brbuttoncanvascaptioncitecode
colcolgroupcommanddatalistdddel
detailsdfndivdldtem
embedfieldsetfigcaptionfigurefooterform
h1~h6headheaderhgrouphrhtml
iiframeimginputinskbd
keygenlabellegendlilinkmap
markmenumetameternavnoscript
objectoloptgroupoptionoutputp
parampreprogressqrprt
rubyssampscriptsectionselect
smallsourcespanstrongstylesub
summarysuptabletbodytdtextarea
tfootththeardtimetitletr
ulvarvideowbrテキスト


HTML5入門:カテゴリー!!フレージング・コンテンツ

 段落などの中に含まれるテキストを表します。

aabbraddressarea
articleaside
audiobbacebdoblockpuotebody
brbuttoncanvascaptioncitecode
colcolgroupcommanddatalistdddel
detailsdfndivdldtem
embedfieldsetfigcaptionfigurefooterform
h1~h6headheaderhgrouphrhtml
iiframeimginputinskbd
keygenlabellegendlilinkmap
markmenumetameternavnoscript
objectoloptgroupoptionoutputp
parampreprogressqrprt
rubyssampscriptsectionselect
smallsourcespanstrongstylesub
summarysuptabletbodytdtextarea
tfootththeardtimetitletr
ulvarvideowbrテキスト
※a,del,ins,map...フレージング・コンテンツのみを含む場合
※area...map要素の中にある場合

HTML5入門:カテゴリー!!埋め込みコンテンツ

 外部のリソースを文書内に埋め込むコンテンツや、HTML以外の言語で表現されるコンテンツです。

aabbraddressarea
articleaside
audiobbacebdoblockpuotebody
brbuttoncanvascaptioncitecode
colcolgroupcommanddatalistdddel
detailsdfndivdldtem
embedfieldsetfigcaptionfigurefooterform
h1~h6headheaderhgrouphrhtml
iiframeimginputinskbd
keygenlabellegendlilinkmap
markmenumetameternavnoscript
objectoloptgroupoptionoutputp
parampreprogressqrprt
rubyssampscriptsectionselect
smallsourcespanstrongstylesub
summarysuptabletbodytdtextarea
tfootththeardtimetitletr
ulvarvideowbrテキスト


HTML5入門:カテゴリー!!インタラクティブ・コンテンツ

 ユーザーが操作することのできるコンテンツです。

aabbraddressarea
articleaside
audiobbacebdoblockpuotebody
brbuttoncanvascaptioncitecode
colcolgroupcommanddatalistdddel
detailsdfndivdldtem
embedfieldsetfigcaptionfigurefooterform
h1~h6headheaderhgrouphrhtml
iiframeimginputinskbd
keygenlabellegendlilinkmap
markmenumetameternavnoscript
objectoloptgroupoptionoutputp
parampreprogressqrprt
rubyssampscriptsectionselect
smallsourcespanstrongstylesub
summarysuptabletbodytdtextarea
tfootththeardtimetitletr
ulvarvideowbrテキスト
※audio,video...controls属性が指定されている場合
※img...usemap属性が指定されている場合
※innput...type属性の値が「hidden」場合
※menu...type属性の値が「toolbar」でない場合
※object...usemap属性が指定されている場合

HTML5入門:カテゴリー!!セクショニング・ルート

 次の要素は上記のカテゴリーとは別に、セクショニング・ルートというカテゴリーに属しています。

aabbraddressarea
articleaside
audiobbacebdoblockpuotebody
brbuttoncanvascaptioncitecode
colcolgroupcommanddatalistdddel
detailsdfnivdldtem
embedfieldsetfigcaptionfigurefooterform
h1~h6headheaderhgrouphrhtml
iiframeimginputinskbd
keygenlabellegendlilinkmap
markmenumetameternavnoscript
objectoloptgroupoptionoutputp
parampreprogressqrprt
rubyssampscriptsectionselect
smallsourcespanstrongstylesub
summarysuptabletbodytdtextarea
tfootththeardtimetitletr
ulvarvideowbrテキスト


HTML5入門:カテゴリー!!トランスペアレント

 一部の要素には、コンテンツモデルに「トランスペアレント」と定義されているものがあります。これは、そのコンテンツモデルが透過であるという意味です。親要素のコンテンツモデルをそのまま継承することになります。



 読んでいただきありがとうございます。お疲れさまでした。
 今日はここまでです。次回は基礎知識 vol.4  最終編として、「セクションとアウトライン」について勉強したいと思います。
 興味ある方はまたお願いします。


関連記事

テーマ : インターネットサービス    ジャンル : コンピュータ

TOP > HTML5 > HTML5入門:コンテンツモデルとカテゴリー!!基礎知識編 vol.3

LEAVE
'A'
COMMENT






07-2018
SUN MON TUE WED THU FRI SAT
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -

06   08

月別アーカイブ
タグクラウド
全記事表示リンク

 About
WebBox norijin note

はじめまして!!
1983年4月生まれのAB型。広島出身の元美容師で、その後、大阪にてIT企業に勤め、現在三人で会社を立ち上げる為、日々精進しています。
 ブログでは、WEBについて勉強した内容や、自分が使ってて便利な情報を気ままに発信しています。

 Contact
メールフォーム

名前:
メール:
件名:
本文:

 link
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。