Weblasts

セクショニングコンテンツ

セクショニングとはW3Cさん曰く
『見出しとフッターの範囲を定義するコンテンツ』と定義されているようです。

見出しは<h1>~<h6>のタグで囲まれた見出し。
フッターはそのまま<footer>を表しているようです。
ただ、<footer>に関しては省略することができるので、見出しにあたる<h1>~<h6>まで見出しタグが入っているのが絶対守らなくてはならないルールになります。
<h1>タグを他の場所で使っていてもセクショニングコンテンツの中であれば、<h1>タグを再び使うことができます。そのセクショニングコンテンツを切り分けて考えて良いということだと捉えてもらえればいいと思います。

セクショニングコンテンツの種類

W3Cさん曰くセクショニングコンテンツに分類されている要素は、
<article><section><nav><aside>の4種類になっています。
意外なことに<div>が含まれていませんので間違えないように注意が必要ですね。

<article>タグ

<article>タグで囲まれた要素は、サイトのコンテンツの中で自己完結できるコンテンツを示します。
例としては、ニュースサイトの記事、ブログの投稿などがこれに当たります。
<article>タグで囲まれた要素を抜き出したとき、一つのページとして成り立つかどうかが判断基準になります。

<section>タグ

<section>タグの役割は「文書のアウトラインを明示する」ことです。

記事の中の章分けやパーツ、普通のサイトでもページ内のコンテンツを一つ一つを部品分けするようなタグになります。

このタグも見出しが必須なので見出しにあたるタグを入れましょう。

文書のアウトラインとは?

簡単に説明すると「文書の階層的な目次」
でも、そんな簡単なものではないので

参考サイト:アウトラインとは?|HTML5基礎知識|アウトラインのルール

<nav>タグ

主要なナビゲーションを囲むときに使うタグ。
主要なナビゲーションは、グローバルナビを指しています。フッターナビなどでは基本的には使用しません。
この<nav>タグもセクショニングコンテンツの一つなので見出しが必要とされています見出しが必要とされていますが、実際に使われているところは見たことがありません。
nav要素における「見出しの省略」は賛否両論なので、制作者サイドで決めていいです。
因みに私は見出しを省略する派です。

<aside>タグ

周りのコンテンツとの関連が薄いコンテンツを囲んで使うタグです。
メインとなるコンテンツの主流からはみ出した情報や補足情報等を示します。
主にサイドバーをまとめて使ったりします。

POPULAR