２カラムページ（文書構造）
- テキストP.096〜
- 文書構造（セマンティックなマークアップ）
- HTML Living Standard（日本語訳）
セマンティックWeb
- テキストP.037
- 検索サイトに正確な情報を提示する
- Webアクセシビリティも考慮する
Webサイトを構成するパーツ
- 文書構造を構成するブロック
ヘッダー
- HTMLドキュメント内では必須
- 特に「h1」は、抜くことはできません
ナビゲーション
- nav
- グローバルナビゲーション
- ローカルナビゲーション
- パンくずナビゲーション
- navタグを複数回使用することは文法的には間違っていませんが、navは主要なナビゲーションを定義する為にあるので推奨は出来ません
メインエリア
- main
- ページに１回だけ使う
- 直下にh要素は不要
記事エリア
- article
- ブログの記事のような「自己完結している要素」に使う
- ブロックを他ページへ移動しても成立する記事の場合に使う
- h2〜h6の見出しが必須（h1を指定しても、h2として扱われます。）
情報補足エリア
- aside
- 関連リンク（ページテーマの補足情報）・広告・コラムなど、省略してもメインコンテンツの意味がわかる情報の場合に使う
- h2〜h6の見出しが必須（h1を指定しても、h2として扱われます。）
フッターエリア
- footer
- 著作に関する情報に使う
- ロゴ、ナビゲーションリンクなどを含めることが多くなっています
section
- テキストP.105〜
- レイアウト目的では使用できない（div要素の替わりには使用できない。）
- ツリー構造を明示する（HTML5 Outliner）ために使う
- 見出しとその内容の段落を囲む（要素の内容が文書のアウトラインで明示的にされる場合のみ）
- h2〜h6の見出しが必須（h1を指定しても、h2として扱われます。）
time
- 記事の投稿日など日時が重要な意味を保つ場合に使う
- time要素は多くの場合、datetime属性が伴う
- datetime属性には、コンピューターが読み取ることができる形式で日時・時刻を書く
- 年・月・日の間に「- ハイフン」を、時刻は「: コロン」を挟む
- 日付と時刻を続けて書く場合には、間に「大文字のT」を入れます
figure
- 画像のマークアップ
- 本文に関係ある画像
- 画像がないと本文の意味が通じない場合は、利用できません
small
- 著作権・免責事項など慣習的に小さく表示する箇所に使います
