2013/07/03

もう悩まない!HTML5の「section要素」と「article要素」の違いについて

もう悩まない!HTML5の「section要素」と「article要素」の違いについて

HTML5から、新たに多くの要素が追加されました。
その中でも特に定義が漠然としていてわかりづらいのが「section要素」と「article要素」です。

従来のマークアップでは、<h1><h2><h3>などの見出しレベルによって、暗黙的に階層をもたせていました。
しかしこのままでは階層が明確ではないので、「section要素」と「article要素」を使用して明確にすることが推奨されています。
ですが使い分けが難しく、実際に使用していない方も多いと思います。

簡単に言ってしまうと、その部分だけを抜き取って、独立したページとして成り立つだけの内容であれば「article要素」を使用し、それ以外は「section要素」を使います。

要素の使い方を説明する前に、まずは「セクション」という概念の説明からしていきます。

「セクション」の意味

まずは<section>の由来である「セクション」という言葉の意味を理解しましょう。
「セクション」とは、仕切り、部分、節、項などのかたまり、まとまりのことを指します。

一冊の本を例に挙げて考え方を理解していきたいと思います。

本には"章" "節" "項"がありますよね?
この"章" "節" "項"それぞれのまとまりを「セクション」と考えます。
すると下図のようにマークアップすることができます。

このように、大見出しの「スタイルブログ」があり、このセクションの中に内容として「スタイルブログ」の文章と各カテゴリがあります。
そして「これだけは絶対!ホームページを公開したら、まずやること6か条」とその文章で一つのセクション。
「もう悩まない!HTML5の「section要素」と「article要素」の違いについて」とその文章で一つのセクション、というようにマークアップすることができます。

従来(HTML5登場前)のマークアップ

<h1>スタイルブログ</h1>
<p>ウェブ業界の最新ニュースやトレンド、SEOの知識やHTML,CSSの便利なワザなどを紹介していきます。</p>
<h2>これだけは絶対!ホームページを公開したら、まずやること6か条</h2>
<p>
皆さんはホームページを持っていますか?<br /> 
個人的なブログだったり、お店のホームページだったり・・・<br /> 
今や誰もがホームページを簡単に持てる時代になっていますが、サイトを作った後に何を...
</p>
<h2>もう悩まない!HTML5の「section要素」と「article要素」の違いについて</h2>
<p>
HTML5から、新たに多くの要素が追加されました。<br /> 
その新要素の中でも特に定義が漠然としていてわかりづらいのが「section要素」と「article要素」です。
</p>

上記は、従来の見出し要素を使用してマークアップした例です。

従来はこのように、<h1><h2><h3>などの見出しレベルによって階層をもたせていました。
しかし、これではどこまでが一つのセクションであるのか、明確ではありません。

ここで新要素「section要素」と「article要素」の出番です!
これらを使用することによって階層を明確に示すことができるようになります。

section要素

「section要素」で囲んだ範囲は、一つのセクションとなります。
具体的にセクションの範囲がどこであるのかを、「section要素」によって示すことができるようになります。
前項の従来の方法でマークアップしたものを、「section要素」を使用して表現するとこのようになります。

<h1>スタイルブログ</h1>
<p>ウェブ業界の最新ニュースやトレンド、SEOの知識やHTML,CSSの便利なワザなどを紹介していきます。</p>
<section>
  <h1>これだけは絶対!ホームページを公開したら、まずやること6か条</h1>
  <p>
  皆さんはホームページを持っていますか?<br /> 
  個人的なブログだったり、お店のホームページだったり・・・<br /> 
  今や誰もがホームページを簡単に持てる時代になっていますが、サイトを作った後に何を...
  </p>
</section>
<section>
  <h1>もう悩まない!HTML5の「section要素」と「article要素」の違いについて</h1>
  <p>
  HTML5から、新たに多くの要素が追加されました。<br /> 
  その新要素の中でも特に定義が漠然としていてわかりづらいのが「section要素」と「article要素」です。
  </p>
</section>

「section要素」などを使用してセクションを明確にすると、アウトラインの判別に見出しレベルが関係なくなります。
つまり、「section要素」が入れ子関係を示しているので、見出しレベルがどうであってもアウトライン(セクションの構造)は変わらないのです。
そのため、すべての見出しを「h1要素」にしてしまう方がSEO対策に有効であるという意見もあります。

article要素

「article要素」は、ドキュメント、ページ、アプリケーション、サイトの中の自己完結した構成を表します。
つまり、それ自体で独立したコンテンツとして成り立つ自己完結したものを「article要素」で表現します。

では、「独立したコンテンツ」とは?
こう考えるとわかりやすいかもしれません。

「RSSフィードで読み込んで、一つの記事として成り立つかどうか。」

ニュース記事やブログ記事などがわかりやすい例です。
一つの記事があるとします。
この記事全体は独立したコンテンツなので、「article要素」で表現することができます。
ブログ記事一覧ページなど複数の記事を表示している場合、その一つ一つの記事は独立したコンテンツであるため、これも「article要素」で表現できます。

弊社のトップページの「新着情報」のソースコードを参考にして解説していきます。

<article>
  <div>
    <div>
      <p>2013/07/01</p>
      <h1>これだけは絶対!ホームページを公開したらまずやること6か条</h1>
    </div>
    <p>
      <img src="サムネイル画像パス">
    </p>
  </div>
</article>

当サイトではこのようにコーディングしています。
「RSSフィードで読み込んで、一つの記事として成り立つかどうか」を考えると、記事一つ一つは、RSSフィードとしてその部分だけを抜き取ってもコンテンツとして成立します。
よって、個別に「article要素」で表現することができるのです。

「article要素」は、マークアップする人にとって独立しているかどうか、判断基準が変わってくると思います。
より明確な判断方法などがありましたらまた記事にしてご紹介したいと思います。

追記

従来通り、「section要素」と「article要素」を使わずにマークアップすることは可能ですので判断に困る場合は無理に使う必要はありません。