HTML5―コンテンツモデル

HTML5 授業



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


《div要素を使ったマークアップ》

ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5</title>

<!-- IE対策 -->
<!--[if ite IE 9]>
<script src="http://html5shiv.googlecode.com/svn/ttunk/html5.js"></script>
<![endif]-->

<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

<style>
article,aside,dialog,figure,footer,header,hgroup,menu,nav,secton{ display: block;}
</style>

</head>
<body>

<div id="header">
<p>ホームページ</p>
<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>

</body>
</html>

ブラウザで表示【 Chrome 】






HTML5 Outliner【 Chrome 】







コンテンツモデル




ソースコード【 HTML 】

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

ブラウザで表示【 Chrome 】





HTML5 Outliner【 Chrome 】







section要素

  • 文書のアウトライン
  • メインコンテンツを入れる


ソースコード【 HTML 】

<section>
<h1>大見出し</h1>
<p>本文</p>
</section>

section要素でアウトラインを表す




article要素

  • ブログなどの記事に使う
  • 独立した記事として成立する内容に使う


《article要素を使ったマークアップ》

ソースコード【 HTML 】

<section>
<h1>新着記事</h1>
<article>
<h1>記事その１</h1>
<p>記事の本文</p>
</article>
<article>
<h1>記事その２</h1>
<p>記事の本文</p>
</article>
</section>

ブラウザで表示【 Chrome 】





HTML5 Outliner【 Chrome 】






《article要素を入れ子に使ったマークアップ》

  • 親のarticle要素の関連記事を意味する
  • section要素のように「記事を見出しで区切る」ためにarticle要素を入れ子にしてはいけない

ブラウザで表示【 Chrome 】





HTML5 Outliner【 Chrome 】






aside要素

  • 補足的なコンテンツに使う
  • メインコンテンツに比べて重要度が低い補足的なコンテンツを扱う
  • 一般的にサイドバーに配置されるコンテンツを入れますが、ページのサイドにレイアウトしなければいけないわけではない


《aside要素を使ったマークアップ》

ソースコード【 HTML 】

<section>
<h1>セクションの見出し</h1>
<p>主要となるコンテンツ</p>
</section>
<aside>
<ul>
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>
</aside>

ブラウザで表示【 Chrome 】





HTML5 Outliner【 Chrome 】







nav要素

  • 主要なナビゲーションに使う
  • 主要なナビゲーションやサイドバーのグローバルメニューのみを扱う
  • テキスト中にある細かなリンクはnav要素である必要はない


《nav要素を使ったマークアップ》

ソースコード【 HTML 】

<nav>
<ul>
<li><a href="#">メニュー１</a></li>
<li><a href="#">メニュー２</a></li>
<li><a href="#">メニュー３</a></li>
<li><a href="#">メニュー４</a></li>
<li><a href="#">メニュー５</a></li>
</ul>
</nav>
<section>
<h1>セクションの見出し</h1>
<p>主要となるコンテンツ</p>
</section>

ブラウザで表示【 Chrome 】





HTML5 Outliner【 Chrome 】







header要素とfooter要素

  • 主要なナビゲーションに使う
  • ヘッダー・フッターに使用する
  • section要素やarticle要素に入れることもできる
  • アウトラインに影響を与えない


《header要素とfooter要素を使ったマークアップ》

ソースコード【 HTML 】

<header>
<p>~~公式ページ</p>
<nav>
<ul>
<li><a href="#">メニュー１</a></li>
<li><a href="#">メニュー２</a></li>
<li><a href="#">メニュー３</a></li>
<li><a href="#">メニュー４</a></li>
<li><a href="#">メニュー５</a></li>
</ul>
</nav>
</header>
<section>
<h1>セクションの見出し</h1>
<p>主要となるコンテンツ</p>
</section>
<footer>
<p>(c)2013 WebDesign</p>
</footer>

ブラウザで表示【 Chrome 】





HTML5 Outliner【 Chrome 】