HTML5:<section>(セクション)要素について
section要素は、HTML5から新たに追加された要素です。そもそもセクションとはどういった定義なのでしょうか?
セクションとは、ドキュメントやアプリケーション、Webサイトやブログの一部分となる、意味や機能のひとまとまりのことです。
Webサイトのセクションとしては、例えば、導入部分、新着情報、連絡先などが考えられます。
章や節や項のように、見出しとそれに関する内容というように階層構造(※アウトライン)になる範囲を定義する領域になります。
<section>(セクション)要素の使用例
一般的には、最初に見出しがあって、その後、それに関する文章などが続くような、「ひとまとまり」をセクションとします。
<section> <h1>見出し</h1> <p>内容</p> </section>
ウェブページの中に独立した記事<artivle></article>があり、その記事が複数のセクションで分けられる構造だった場合のマークアップを示します。
<article> <h1>文章のタイトル</h1> <section> <h1>まえがき</h1> <p>セクションの段落。セクションの段落。</p> </section> <section> <h1>本文のタイトル</h1> <p>セクションの段落。セクションの段落。</p> </section> <section> <h1>あとがき</h1> <p>セクションの段落。セクションの段落。</p> </section> </article>
ここでは、<section>を<article>の子要素として扱っています。この例で注目すべき点は、各要素の親子関係と見出しの付け方です。
HTML5以前のマークアップでは、<h1>タグは1ページの中で一回までしか使えませんでしたが、HTML5からは、セクション毎に<h1>タグを使えるようになりました。
HTML4の時点では、文章のアウトラインを定義できるタグが少なかったため、<h2>〜<h6>を使って、見出しの重要度で表現していました。
<div> <h1>この文章のタイトル</h1> <p>文章の内容。文章の内容。文章の内容。</p> <h2>第一章の見出し</h2> <h3>節の小見出し</h3> <p>文章の内容。文章の内容。文章の内容。</p> <p>文章の内容。文章の内容。文章の内容。</p> <h3>節の小見出し</h3> <p>文章の内容。文章の内容。文章の内容。</p> <p>文章の内容。文章の内容。文章の内容。</p> <h2>第二章の見出し</h2> <h3>節の小見出し</h3> <p>文章の内容。文章の内容。文章の内容。</p> <p>文章の内容。文章の内容。文章の内容。</p> <h3>節の小見出し</h3> <p>文章の内容。文章の内容。文章の内容。</p> <p>文章の内容。文章の内容。文章の内容。</p> </div>
曖昧な文章構造であることが分かります。
このマークアップでは、文章の内容が書かれた各段落が、一体どの章や節に結びついているのか、関連付けがされていません。
section(セクション)要素を使って書き直してみると、、、
<article> <h1>この文章のタイトル</h1> <section> <h2>第一章の見出し</h2> <section> <h3>節の小見出し</h3> <p>文章の内容。文章の内容。文章の内容。</p> <p>文章の内容。文章の内容。文章の内容。</p> </section> <section> <h3>節の小見出し</h3> <p>文章の内容。文章の内容。文章の内容。</p> <p>文章の内容。文章の内容。文章の内容。</p> </section> </section> <section> <h2>第二章の見出し</h2> <section> <h3>節の小見出し</h3> <p>文章の内容。文章の内容。文章の内容。</p> <p>文章の内容。文章の内容。文章の内容。</p> </section> <section> <h3>節の小見出し</h3> <p>文章の内容。文章の内容。文章の内容。</p> <p>文章の内容。文章の内容。文章の内容。</p> </section> </section> </article>
section要素を利用することによって、立体的で見やすくなります。人間の目にも分かりやすくなりますし、アウトラインがしっかりと構築できているため、コンピューターも書かれている内容の重要度を予測しやすくなります。
<section>(セクション)要素を使う時の注意点
- レイアウト目的のコンテナ要素として用いる時は、<section>ではなく、<div>を使用します。
- 見出しを付けることができない場合には、<section>~</section>で囲むのはあまり適切ではありません。
- 上記二点をクリアしてセクションであることが明確な場合にも、より具体的な意味を持つ<article>、<aside>、<nav>のほうがふさわしい場合には、これらのタグを使用します。
HTML5:<section>(セクション)要素のまとめ
HTML5から追加されたsection要素をまとめてみました。
アウトラインがはっきりとし、立体的で非常に見やすいため、SEO対策としても使える要素です。
HTML5以前にコーディングされたWebサイトのコードを見直して、積極的にsection要素を使用すべきだと思います。
コメント