[HTML5] HTML5のarticle・sectionによるアウトライン

  HTML, SEO ,

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
HTML5 アイコン

HTML5を使用したサイトも多くなってきて、HTML5を用いて構築する方も多いと思います。そこで、前回ご紹介させていただいた「HTMLコーディングの基本のアウトラインとは」の続編になる、HTML5においてarticle・sectionを用いたアウトライン(階層構造)についてご紹介していきたいと思います。

アウトラインとは

前回説明したように、アウトラインとはGoogleなどの検索ロボット(クローラー)に対して、WEBサイトの階層構造を示すもののことです。

ユーザー(人間)は文字の大きさ・太さなどのデザインによる視覚情報や書いてある文章の意味からアウトラインを推測・判断することができます。しかし、検索ロボット(クローラー)などは視覚情報ではなくHTMLの文章構造で判断します。
そのため、検索ロボット(クローラー)には適切なHTMLの文章構造を示す必要があります。適切なHTMLの文章構造を示すものが「アウトライン」です。

XHTMLではh1~h6の要素を使用することで文章構造の区切りを表現をして階層化されているのを示していました。
HTML5ではsection,article,nav,asideといった4つの新しい要素(セクショニングコンテンツ)により正確にアウトラインを示すことができるようになりました。今回はHTML5のアウトラインについてご紹介していきます。

articleとは

ブログの記事のような一つのコンテンツを表すために使用して、文章が単独で意味を成し完結できるセクション要素。入れ子にすれば 内側のarticleの内容は、外側のarticleの内容に関連している必要がありアウトラインが変化し階層が一段下がる要素。

sectionとは

見出しタグとセットで使うことが必要な文章の塊を表し、段落とか章を示すセクション要素。入れ子にすればアウトラインが変化し階層が一段下がる要素。

navとは

ナビゲーションを示すセクション要素。Navigationという見出しを持っているため見出しを必要としない要素。

asideとは

あまり重要でない部分を示すセクション要素。見出しを必要としない要素。

アウトラインの記述例

アウトラインに影響を与える見出しタグをもとに、article・sectionを用いてbody内に下記のように記述を行いました。

<h1>見出し1</h1>
<article>
<h2>見出し2</h2>
  <section>
  <h3>見出し3</h3>
  <p>コンテンツ・コンテンツ</p>
  </section>
  <section>
  <h3>見出し3</h3>
  <p>コンテンツ・コンテンツ</p>
    <section>
    <h4>見出し4</h4>
    <p>コンテンツ・コンテンツ</p>
      <section>
      <h5>見出し5</h5>
      <p>コンテンツ・コンテンツ</p>
      </section>
    </section>
    <section>
    <h4>見出し4</h4>
    <p>コンテンツ・コンテンツ</p>
      <section>
      <h5>見出し5</h5>
      <p>コンテンツ・コンテンツ</p>
      </section>
    </section>
  </section>
</article>

HTML5でコーディングをしてHTML 5 Outlinerでチャックすると、aside・navではUntitled sectionとなりますが、仕様なので気にしなくて大丈夫です。

アウトライン解析結果

上記で示した記述例を解析サイトにコピペをして解析すると次のような結果となります。
html5 アウトライン 結果

解析結果と記述例を見比べてみると、解析結果と記述例の見出しが同じ階層構造になっていることがわかると思います。
このことから、アウトラインをしっかりと表現することができていると言えます。注意すべきところはbodyにもアウトラインが生成されるというところです。

SNSでもご購読できます。

コメントを残す

*