文章のまとまりを表すセクション系の要素をまとめます。CSSでボックスレイアウトを行う場合に必須になってくると思います。
[topBannar]
<div>タグ
ひとかたまりの範囲として定義する際に使うタグです。<div>で囲った要素が、一つのボックスになります。このタグに特別な意味はありませんが、CSSを使ってレイアウトやスタイリングを指定する際のコンテナ要素の定義によく用います。ただし、他に適切な要素が無い場合にのみ用いられるタグであり、意味的に以降に紹介するタグに該当するような部分はそれらを用いることが推奨されます。ちなみに、<p>タグ内の文章の一部分などを囲む場合は<sapn>タグを用います。
<div>タグは、<a>タグによってマークアップすることができます。つまり、ボックス全体をリンク要素にすることができます。
セクション
文章にある程度のまとまりがある場合、以下のようなタグを使ってマークアップすることができます。これらのタグは、文章のまとまりを明確化します。ちなみに、これらは<div>タグで囲っても問題ないようです。
| <section> | 一般的なセクションを定義します。以下のタグに該当しないような、文章のまとまりに対して使います。 |
| <article> | 内容が単体で完結するようなセクションを定義します。例えば、ブログのエントリやコメントなどに利用します。 |
| <aside> | ページ内の補足的な情報を表すセクションを定義します。メインコンテンツとは関係の薄いセクションを表します。書籍でいう、余談やコラムのような内容の部分に使用します。 |
| <nav> | ナビゲーションを表すセクションを定義します。 |
これらのタグは、文章のまとまりを定義するために使用するため、単純なレイアウト目的に利用してはいけません。
文章の構造化
多くのWebサイトは、ヘッダー部分、メインコンテンツ部分、フッター部分を持ちます。それらを表すようなタグが用意されています。
| <header> | イントロダクションやナビゲーションのような、セクションの先頭のグループを示します。<body>直下に置いた場合には、そのページ自体の、何らかのセクション下に置いた場合はそのセクションのヘッダを表します。ページ内に複数定義しても問題はありません。また、<nav>を囲むことも問題ないようです。 |
| <main> | ページのメインコンテンツ部分を示します。複数定義することはできず、また、後述するsection等のタグやheader、footer内に置くことはできません。 |
| <footer> | セクションのフッターを示します。このタグ内には、例えば、著作権情報や連絡先を記載します。<body>直下に置いた場合には、そのページ自体の、何らかのセクション下に置いた場合はそのセクションのヘッダを表します。ページ内に複数定義しても問題はありません。 |
[bottomBannar]