コンテンツモデル

カテゴリー

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

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

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

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


《グローバル属性》

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

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

DOMインターフェース

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

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

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

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

コンテンツモデル

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

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

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

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