カテゴリー別アーカイブ: HTML5

[HTML5]セクショニング要素

※HTML5の要素の定義はこれからも変更点が出てくることがあるので注意 ( 2011/6 現在 )。

HTML5には、以下のようなセクションを表すためのセクショニング要素がある。

  • article要素
  • 内容が単体で完結するセクションであることを示す際に使用する。
    フォーラムの投稿、雑誌や新聞の記事、ブログのエントリ、コメント、その他コンテンツの独立した項目。
    【使用例】

    <article>
    <h1>ブログタイトル</h1>
    <p>ブログ記事・・・</p>
    <article>
    <h1>コメント</h1>
    <p>コメント内容・・・</p>
    </article>
    </article>
  • section要素
  • 通常はヘッダーを伴う。ヘッダーが伴わないならsection要素を使用するべきではない。
    また、section 要素を利用することで、どこにでも h1 要素を使うことができるようになる。
    article, aside, nav の方が適切な場合には section 要素は使わない。
    【使用例】

    <section>
    <h1>見出し</h1>
    <p>文章など文章など・・・</p>
    </section>
  • nav要素
  • 重要なナビゲーションブロックからなるセクションだけが、nav 要素に適している。
    サイト内リンクのリストをフッターに入れることが一般的であるが、このような場合においては、footer 要素のほうが適している。

  • aside要素
  • あまり重要でないコンテンツに使っても良い。
    例えば、サイドバーによく見るブログロール、補助的なナビゲーション、ページに関連する広告など。
    article 要素の中で使うときはその記事に関連した補助的なコンテンツとするべきである。