注意

あくまで個人的なガイドラインである為、内容には間違いが含まれる可能性があります。

個人的アウトライン

HTML5を文章としてイメージし、アウトラインを読むだけで「どの箇所がナビゲーションであるか？」「どの箇所がメインコンテンツであるか？」を明確に表すように設計する。
表示したくない見出し要素に対してはCSSで表示しないようにする。

Ex)
1.サイト名
　1.メインナビゲーション
　2.メインコンテンツ
　　1.記事タイトル_1
　　2.記事タイトル_2
　　3.記事タイトル_3
　　4.記事タイトル_4
　　5.記事タイトル_5
　3.ページナビゲーション
　4.サイドメニュー
　　1.ウィジェットタイトル_1
　　2.ウィジェットタイトル_2
　　3.ウィジェットタイトル_3

section

アウトライン上問題がある場合かつ、他のセクション要素が適切でない場合に使用する。

※レイアウトの調整を目的とする場合はdiv要素を使用する。

nav

ユーザが主に使うと思われるナビゲーションに対して使用する。

※同じ内容のナビゲーションがヘッダーとフッターに存在する場合は、メインであるヘッダー側のナビゲーションにのみ使用し、フッター側のナビゲーションにはsection要素を使用する。
※nav要素でナビゲーションを分割する場合はnav要素内でsection要素、もしくはsection要素の入れ子を使用する事で分割する(section要素の入れ子を使用する場合は見出しを忘れない事)。

article

メインコンテンツやコメント本文に対して使用する。

※WordPressなど「続きを読む」などで文章が分割されている場合、記事として完結しない事が懸念されるが「Feedの対象である」という判断基準を最優先にし、articleを使用する。
※コメント本文の場合はコメント本文はarticleを使用するが、コメントやコメントフォームを含む部位はasideを使用する。ただし、コメント本文自体を重要なコンテンツ(読者に対ディスカッションを求める場合等)として扱う場合はarticle要素を使用する。

aside

メインコンテンツとの関連が薄い場合、かつaside要素が削除されてもメインコンテンツに影響を与えない場合に使用する。または主にサイドバーに対して使用する(WordPressの場合はウィジェットエリア)。他にもコメントエリアやトラックバックエリアに使用する。

※「関連する記事」は存在しなくてもメインコンテンツは成り立つが、比較的メインコンテンツと関連性のあるコンテンツであるためsection要素でセクションを分割する。
※記事のイメージやアイキャッチ画像等のメインコンテンツになり得ない画像に使用する。ただし、画像がメインコンテンツの補足的な役割を果たすならばfigure要素を見当する必要がある。

header

サイトのヘッダー、メインコンテンツのヘッダー、コメント本文のヘッダーとして使用する。

footer

サイトのフッター、メインコンテンツのフッター、コメント本文のフッターとして使用する。

address

管理者の連絡先情報として使用する。

※管理者の住所には使用しない。
※サイト全体の管理者の連絡先情報として使用する場合はルート要素の直下に配置する。
※メインコンテンツの著者の連絡先情報として使用する場合はメインコンテンツを囲むarticle要素直下で使用する。

hgroup

主にサイトのヘッダーでサイト名とディセプションをまとめる為に使用する。

※偶然h1、h2が続く場合はhgroup要素は使用しない。

h1～h6

h1のみを使用する。セクションの分割は他のセクション要素で行う。

※他のセクション要素でセクションを分割した際には必ず使用するようにする。