コンテンツモデル
文書構造をマークアップする
《div要素を使ったマークアップ》
<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>
コンテンツモデル
<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>
section要素
- 文書のアウトライン
- メインコンテンツを入れる
<section> <h1>大見出し</h1> <p>本文</p> </section>
section要素でアウトラインを表す
article要素
- ブログなどの記事に使う
- 独立した記事として成立する内容に使う
《article要素を使ったマークアップ》
<section> <h1>新着記事</h1> <article> <h1>記事その１</h1> <p>記事の本文</p> </article> <article> <h1>記事その２</h1> <p>記事の本文</p> </article> </section>
《article要素を入れ子に使ったマークアップ》
<article> <h1>記事その１</h1> <p>記事の本文</p> <article> <h1>関連記事</h1> <p>記事の本文</p> </article> </article>
- 親のarticle要素の関連記事を意味します。
- section要素のように「記事を見出しで区切る」ためにarticle要素を入れ子にしてはいけません
aside要素
- 補足的なコンテンツに使う
- メインコンテンツに比べて重要度が低い補足的なコンテンツを扱う
- 一般的にサイドバーに配置されるコンテンツを入れますが、ページのサイドにレイアウトしなければいけないわけではありません
《aside要素を使ったマークアップ》
<section> <h1>セクションの見出し</h1> <p>主要となるコンテンツ</p> </section> <aside> <ul> <li>項目１</li> <li>項目２</li> <li>項目３</li> </ul> </aside>
nav要素
- 主要なナビゲーションに使う
- 主要なナビゲーションやサイドバーのグローバルメニューのみを扱う
- テキスト中にある細かなリンクはnav要素である必要はない
《nav要素を使ったマークアップ》
<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>
header要素とfooter要素
- 主要なナビゲーションに使う
- ヘッダー・フッターに使用する
- section要素やarticle要素に入れることもできる
- アウトラインに影響を与えない
《header要素とfooter要素を使ったマークアップ》
<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>
