HTML5-4

コンテントモデルとカテゴリとの関係

【例】

①body要素
　カテゴリ：セクショニングルート
　コンテントモデル：フロー要素

②h1要素
　カテゴリ：フロー要素
　コンテントモデル：フレージング要素

③p要素
　カテゴリ：フロー要素
　コンテントモデル：フレージング要素

④テキスト
　カテゴリ：フロー要素、フレージング要素
　コンテントモデル：なし

⑤a要素
　カテゴリ：フロー要素(フレージング要素の場合あり)、インタラクティブ要素
　コンテントモデル：親要素を継承するが、インタラクテイブ要素を持てない

⑥div要素
　カテゴリ：フロー要素
　コンテントモデル：フロー要素

⑦img要素
　カテゴリ：フロー要素、フレージング要素、エンペッディド要素
　コンテントモデル：空要素

• body要素内にh1要素、p要素は可能
• p要素のフレージング要素なので、子にフロー要素を持つことができません。
• div要素内のa要素は、親要素を継承すると、フロー要素となり、a要素の子にp要素を含めることは可能
• p要素内のa要素は、親要素を継承すると、フレージング要素となり、a要素の子にフロー要素を持つことはできません。
• img要素はフロー要素、フレージング要素、エンベッティング要素ですので、子になることは可能。
• 同じようにテキストも子になることが可能
• 上記は透過性という

HTML5-3

カテゴリについて

①メタデータ要素
　head要素内ににかける要素
　title、link要素など

②フロー要素
　body要素内に含めることができる要素、ほとんどの要素がこれに含まれる

③セクション要素
　Webページのセクションを構成する要素
　article、aside、nav、section

④ヘディング要素
　見出しを構成
　h1～h6、hgroup

⑤フレージング要素
　要素の内容がテキストや画像などのコンテンツそのものという要素
　a、audio、img・・・

⑥エンベッディド要素
　HTMLドキュメントの外部のリソースを参照する要素
　フレージング要素が含まれる

⑦インタラティブ要素
　ユーザ操作に反応するタイプの要素
　a、select要素など

次回はコンテントモデルとカテゴリとの関係です

HTML5-2

HTML4とHTML5との特徴的な違い

①HTML4では、HTML書式とXHTMLの書式が複雑であったが、HTML5では統一された

②DOCTYPE宣言が1種類で大文字・小文字区の区別がなくなる

③コンテントモデル(タグの役割の変更)
　Webブラウザにわかりやすくするのが目的・・・視点を変えれば開発者が利用しやすい
　HTML4でわかりにくかったブロック要素とインライン要素を明確にしている

　コンテントモデル：ある要素がもちうるようその内容を示す(P要素ならP要素)

　カテゴリ：似たような性質をもった要素をグループ化させる
　　カテゴリの関連性については下記のURLを参照
　　http://www.w3.org/TR/html5/

カテゴリについては次回

HTML5-1

HTML5についての基本的特徴と古いWebブラウザを利用する場合について

①HTML5はHTML4と互換性がある

②IE6～8はHTML5に対応していない。
　対応させるにはJavaScriptのライブラリを利用する(完全対応ではない)
　http://code.google.com/p/html5shiv/
　より、ZIP形式のライブラリをダウンロードする。
　HTMLファイルのヘッダ部に下記の文を追加
　(jsファイルをdistの下に配置を前提とする)
　
　
　上記についてはタグのみで属性は認識させることができず、CSS3の機能の多くは利用できない。