【HTML5学習】 Part.3 -セクション-

こんにちは＾＾
3回目の投稿です。
今回はセクションを区切るタグについて書いていこうと思います。

セクションとは

文書におけるテーマごとの枠組みのこと。

見出し1つにつき1つセクションがある。

見出しというのは文章や節につく題名で、見出しの配下にある文章や段落などを合わせたまとまりをセクションと言います。つまり、見出しを置けば勝手にセクションが作られます。
これを暗黙のセクションというのだそう。

セクションを作る

従来は、h1,h2,h3などの見出しレベルによって暗黙的に階層をもたせていましたが、HTML5ではきちんと文書を構造化し、明確にすることが推奨されています。
そのため、HTML5では下記のような文書のセクションを区切るタグが用意されています。

article要素

ブログやニュースなど、メインのコンテンツ。それ自体が独立しているコンテンツで、そのセクションをそのままどこかに配信しても違和感のないものに対して使用します。

section要素

メインや副次的コンテンツ以外の意味のある情報の塊、情報を整理した方が分かりやすいものに使用します。

例えば、

<article>ニュース記事1</article>
<article>ニュース記事2</article>

とか

<section>
    <h1>コンテンツ見出し</h1>
    <p>コンテンツ内容</p>
</section>

<article>
    <section>
        <h1>ブログ見出し</h1>
        <p>ブログ内容1</p>
        <p>ブログ内容2</p>
    </section>
</article>

といった使い方でいいのかな？
articleはメインのものに使うってことで割と分かりやすいけど、sectionの使い方があまりピンときにくい。articleで囲ったメインコンテンツに付随してくる、まとめといた方が分かりやすいよね〜っていう情報に対して使ったらいいのかな？

その他のセクショニング・コンテンツ

nav

ナビゲーションに関するタグ

グローバルメニューやサイドメニュー、ウェブサイト内の他のページへのリンクやページ内リンクのこと。

<nav>
    <h1>メニュー</h1>
    <ul>
        <li><a href="index.html">トップページ</a></li>
        <li><a href="item.html">商品紹介</a></li>
        <li><a href="shop.html">店舗検索</a></li>
    </ul>
</nav>

aside

副次的なコンテンツ　補足情報や広告など。

<aside>
<p>補足情報</p>
</aside>

といった感じで今回は終わりたいと思いますが、セクショニング・コンテンツ・・・なかなか使い分けが難しそうです^^;