コンテンツモデル

カテゴリー

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

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

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

《グローバル属性》

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

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

DOMインターフェース

スクリプトからHTMLを操作する場合に、属性は

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

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

《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要素	コピーライトなど、ページのフッター部分
hgroup要素	複数の見出しを含む見出しレベル
figure要素	図表や画像、コードなど、本文から参照されるコンテンツ