Tweet

Pocket

HTML5におけるsection要素の使用例を紹介します。

section要素は、一般的なセクションをマークアップします。

文章構造の例で紹介したようなブログでの使用例は以下のようになります。

<section>
　　<article>
　　　　<h1>記事タイトル</h1>
　　　　<p>記事の本文が入ります。</p>
　　</article>
　　<article>
　　　　<h1>記事タイトル</h1>
　　　　<p>記事の本文が入ります。</p>
　　</article>
</section>

上記の例では記事一覧の固まりをsectionで定義しています。
他にも、article要素の中に区別出来る内容がある場合には、article要素の中でsection要素で区切ることもできます。

<article>
　　<h1>記事タイトル</h1>
　　<section>
　　　　<h1>記事サブタイトル1</h1>
　　　　<p>記事の本文1が入ります。</p>
　　</section>
　　<section>
　　　　<h1>記事サブタイトル2</h1>
　　　　<p>記事の本文2が入ります。</p>
　　</section>
</article>

このようにsection要素は文章構造により、様々な階層で使用出来ます。