セクション
ライン公式アカウント
セクション
コンテンツの区切りを明確にするという役割があります。役割をより明確にするための分類です。
body
用途 | 本文の基点(ルート) |
書式 |
ブラウザに表示される部分、全体のことを指すタグです。
article
用途 | 記事 |
書式 |
記事の部分を意味づけするタグです。このタグは、単独でも成り立つコンテンツに使用されます。例えば、ニュースサイトの記事やブログの記事などです。1つのニュースの見出しと本文をまとめる用途に使用されます。また、作者が書いた見出しと本文(アイキャッチ画像などがある場合はそれも含めて)をまとめる用途でも使用されます。記事とは、あいまいな表現ですが、簡単に言うと人が書いた文章にタイトルがついたもののことです。
nav
用途 | ナビゲーション(サイトの誘導) |
書式 |
サイト内の誘導が役割となります。これはメニューなどで利用されます。また、ページ送りのような部分もサイトの誘導となるため、nav要素の使用が適切です。
main
用途 | 文書の中心的な主題 |
書式 |
そのページの主要なコンテンツの意味付けに使用します。
aside
用途 | 主要なコンテンツに関連はしているが直接は関係のない補足情報 |
書式 |
このタグは、ページの主要なコンテンツと関連はしていますが、直接的な関係はない補足情報などに使用されます。サイドバーなどの場所でよく使用されます。
section
用途 | 同じ分類のいずれの要素にもあたらないセクション |
書式 |
このグループの中では最も汎用的なタグです(具体的な文書構造の意味を持っていません。コンテンツとコンテンツを区切るためのタグです)。他の要素は明確な意味を持っています。例えばarticleやnavなどです。sectionは、このグループの中のタグ、いずれにも当てはまらないような場合に使用します(似たようなdivタグも存在しますが、sectionタグは見出しをつけることができるかどうかに基づいて使用されることが特徴です)。
h1〜h6
用途 | 見出し |
書式 | サンプルソース参照 |
見出しです。コンテンツの見出しを表現する際に使用します。"見出しをつけた"ということはある意味で、"コンテンツに章・節・項の区切りを入れた"ということになります。
サンプルコード
header
用途 | ヘッダー |
書式 |
コンテンツの導入部を示します。1ページに1つだけしか使えないという制約はありません。コンテンツの導入部の意味を指す場所には、headerタグを使用することができます。
footer
用途 | フッター |
書式 |
著作権情報や、関連文書へのリンクなどを記述する箇所です。
address
用途 | 連絡先・問い合わせ先 |
書式 |
連絡先やお問い合わせ先などの情報を記載します。
セクションのタグでレイアウトしてみた
セクションの分類に属するタグを使ってページをレイアウトしてみました。
- 画面の上部にはheaderを、画面の下部にはfooterを配置します。
- コンテンツの主要な部分には、mainタグを使用します。
- 関連した補足情報を表示する部分として、asideでサイドバーを作ります。
- サイトを誘導するようなメニューはheaderの中にnavを入れておきましょう。
- mainの中はarticleで記事をマークアップします。
- 記事にはタイトルがありますのでh2で見出しをつけてやりましょう。
- 記事ではないブロックにはsectionタグを使います。
- footerにはお問い合わせ先の情報などがあるかもしれません。
実際には、作り上げようとしているデザインやコンテンツによって構造は変わってくると思います。