HTML5で新しく定義された新要素「section要素」の使い方

CODE

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>(セクション)要素を使う時の注意点

  1. レイアウト目的のコンテナ要素として用いる時は、<section>ではなく、<div>を使用します。
  2. 見出しを付けることができない場合には、<section>～</section>で囲むのはあまり適切ではありません。
  3. 上記二点をクリアしてセクションであることが明確な場合にも、より具体的な意味を持つ<article>、<aside>、<nav>のほうがふさわしい場合には、これらのタグを使用します。

HTML5：<section>(セクション)要素のまとめ

HTML5から追加されたsection要素をまとめてみました。

アウトラインがはっきりとし、立体的で非常に見やすいため、SEO対策としても使える要素です。

HTML５以前にコーディングされたWebサイトのコードを見直して、積極的にsection要素を使用すべきだと思います。

コメント