コンテンツモデル

カテゴリー
  • ７つのカテゴリーの関係は以下の図のようになります

  • フローコンテンツの中には、一部のめたデータコンテンツ以外のほとんどの要素が含まれています
  • カテゴリーは大きく分けて、heading-content、sectioning-content、それ以外のまとまりの３つ

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

使われる状況

  • 要素を置くことができる場所を示しています


コンテンツモデル

  • 要素が中に含むことができるカテゴリーを示しています


使用できる属性

  • 各要素ごとに使用できる属性を示しています
  • 属性には要素ごとに独自のものとidやclassのように共通（グローバル属性）のものがあります


《グローバル属性》

  • accesskey
  • class
  • contenteditable
  • contextmenu
  • dir
  • draggable
  • dropzone
  • hidden
  • id
  • lang
  • spellcheck
  • style
  • tabindex
  • title


これら以外にも、onclickなどのイベントハンドラ・コンテンツ属性、独自データ（data-）、なども含まれます。


DOMインターフェース

どんなものがあるかを示しています

文書構造をマークアップする

《div要素を使ったHTML5以前のマークアップ》

<div id="header">
<h1>ホームページ</h1>
<div id="nav">
<ul>
<li>メニュー１</li>
<li>メニュー２</li>
<li>メニュー３</li>
</ul>
</div>
<div id="content">
<h1>大見出し</h1>
<p>本文</p>
</div>
<div id="footer">
<p>(c)2013</p>
</div>

コンテンツモデル


各要素は、文書構造を作る上でページ内に複数使用することになります。
そこで、CSSやJavaScriptに対応させるためには「ID名」が必須になります。

<header id="header">
<h1>ホームページ</h1>
</header>
<nav id="glovalNav">
<ul>
<li>メニュー１</li>
<li>メニュー２</li>
<li>メニュー３</li>
</ul>
</nav>
<section id="content">
<h1>大見出し</h1>
<p>本文</p>
</section>
<footer id="footer">
<p><small>(c)2013</small></p>
</footer>

《セクション関連のHTML5新要素一覧》

section要素 セクション区切り
article要素 ブログやニュースサイトの記事など、単独で再利用できる部分
aside要素 本文とは別扱いのリードやコラムなど
nav要素 主要なナビゲーションリンク部分
header要素 同ニュブやナビゲーションなどを補足するページのヘッダー部分
footer要素 コピーライトなど、ページのフッター部分
figure要素 図表や画像、コードなど、本文から参照されるコンテンツ