Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。

[html5]⑤コンテンツモデル

  • コンテンツモデルとは
  • 要素を構成する情報の関係
    • 使われる状況
    • コンテンツモデル
    • 使用できる属性
  • DOMインターフェース
    • コンテンツモデル
    • セクション関連のHTML5新要素

コンテンツモデルとは

f:id:akatonbo_web:20150605095649p:plain

  • どの要素にどんなコンテンツを入れていいか定義したもの
  • すべての要素に定義され、html5マークアップするときはコンテンツモデルを意識する必要がある
  • フロー・コンテンツの中に刃、一部のメタデータ・コンテンツ以外のほとんどの要素が含まれる
  • カテゴリは大別してheading-content, sectioning-content, それ以外のまとまり

要素を構成する情報の関係

使われる状況
  • 要素を置くことができる場所を示す
コンテンツモデル
  • 要素が中に含むことができるカテゴリを示す
使用できる属性
  • 各要素ごとに使用できる属性を示す
  • 属性には要素ごとに独自のものと、id/classのように共通(グローバル属性)のものがある

DOMインターフェース

  • スクリプトからHTMLを操作するとき、属性はどんなものがあるかを示す
コンテンツモデル
主要なコンテンツ周辺情報のコンテンツ
section要素(ページのメイン)nav要素(ナビゲーション)header要素(ヘッダー)
article要素(独立した記事)aside要素(補足)footer要素(フッター)
  • 各要素は文書構造をつくる上でページ内に複数使用することになる
  • <header id= “header… と、id名で個別性をつくる
セクション関連のHTML5新要素
  • section要素▶セクション区切り
  • article要素▶ブログやニュースサイト記事など単独で再利用できる部分
  • aside要素▶本文とは別扱いのリードやコラムなど
  • nav要素▶主要なナビゲーションリンク部分
  • header要素▶導入部やナビゲーションなどを補足するページのヘッダー部分
  • footer要素▶コピーライトなどフッター部分
  • figure要素▶図表や図像、コードなど本文から参照されるコンテンツ



d.hatena.ne.jp