HTML5の勉強を始めた際に使い方に迷う新要素「article要素」の基本と使い方をまとめてみました【MdN連載第5回目】

前回はセクショニング・コンテンツの要素の中で定義が漠然としていて使い方がわかりにくいとよく言われている「section要素」についての基本とサンプルをまとめました。

今回はもうひとつわかりにくい要素の「article要素」の要素をまとめてみたいと思います。

section要素についてのまとめた前回の記事はこちら
HTML5の勉強を始めた際に使い方に迷う新要素「section要素」の基本と使い方をまとめてみました【MdN連載第4回目】

この2つの要素はそれぞれを考えるとわかりやすいのですが、実際のサイトで使うとなると色々な考え方によってどちらにも取れて、どちらを使うのか悩んでしまう場合がよくあります。

「article要素」は「section要素」とどのように違うのか？使い分けはどう考えるのか？

「article要素」に限らずHTML5の要素は原稿内容に応じてどの要素を使うかが変わってきます。そして製作者もそのとらえ方によってどれを使うかを迷ってしまうことがあります。

まずはブログのフォーマットを例に取って学ぶことが簡単だとおもいますので、そこで使い方を覚えて使っていきましょう。

膨大なページ数を作成する案件や運用更新をWEB制作経験者以外が行う場合などには、どの要素の判断に困る場合がありますので、その際は無理に新要素を使わなくてもマークアップしても大丈夫ですので、まずは基本の概念を理解していきましょう。

MdN Design Interactiveの第5回目のURLはこちらになります。
HTML5で新しく定義された新要素『article要素』の使い方の基本をまとめよう

article要素について

article要素はブログの投稿や一覧、ニュースサイトの記事、サイトの更新情報ページなど、その部分の内容だけを取り出した場合に独立したコンテンツとして成り立つ際に使用します。

またブログへのコメント、掲示板の投稿にも使われます。必ずしもそのコンテンツ全文が掲載されていなくてもよいようです。

この独立したコンテンツとはなにか？と思うと思いますが、

『 RSSフィードで読み込こまれた際に1つの記事として成り立っているか 』

ということをまずは意識してみましょう。成り立っているならばarticle要素が適しており、そうでなければsection要素など別の要素を検討します。ここでは実際にフィードがあるかないかは関係ないようです。

しかし記事が成り立っているかという判断はコンテンツによってはわかりにくい部分がありますし、制作者の主観もありますので、一概にこの場合はこちらと言えない場合もでてきます。

このようなことからよくarticle要素とsection要素のどちらを使えばよいのかわからないという疑問が多くあるのだとおもいます。

また制作会社で新規製作の際にこの辺の概念をしっかり決めたとしても、サイト運用をWEB未経験の人がやる場合は、記事を追加する際にどちらかを判断するのは難しい場合も多いとおもいますし、ブログ運営の際も毎回記事の中までそのときの記事の内容に合わせてセクションを考えてマークアップするのは大変なので、TOPページだけしっかりマークアップしてブログなどは記事詳細ページなどは記事ないはマークアップしていないサイトも多くありますので現状は無理せず行うのがよいのかもしれません。

RSSフィードの記事といえばブログの記事エントリーや記事一覧などがまず思い浮かぶと思います。実際に『HTML5でサイトをつくろう』ブログも一覧ページではエントリー毎にarticle要素で囲うようにしています。

それでは通常サイトの場合はどうでしょうか？通常サイトでRSS配信をするのは大抵更新情報関連(最新情報、イベント情報など)になると思います。つまり、RSSを基に考えるとニュース記事は独立したコンテンツとして扱うことができるのでarticle要素で囲めるということのイメージがつかめるかと思います。

ブログによく見るarticle要素の使われ方

記事内に小見出しがなく段落のみの場合

<article>

<header>
<h1>第4回　HTML5で新しく定義された新要素『secion要素』と
『article要素』のまとめよう</h1>
<p><time datetime="2011-12-22">2011-12-22</time></p>
</header>

<p>今回はセクショニング・コンテンツの要素の中で定義が漠然とし
ていて使い方がわかりにくいとよく言われている「section要素」
「article要素」の要素をまとめてみたいとおもいます。</p>
<p><a href="#">続きを見る</a></p>

<footer>
<p> カテゴリ : <a href="#">HTML5でサイトをつくろう</a></p>
</footer>

</article>

<article>
<header>
<h1>第3回　HTML5で新しく定義された新要素をまとめよう</h1>
<p><time datetime="2011-12-13">2011-12-13</time></p>
</header>

<p>HTML5になって新しく定義された新要素（タグ）が多くあります。今回は前回の使い方が変更になった要素の続きとして、・・・</p>
<p><a href="#">続きを見る</a></p>

<footer>
<p> カテゴリ : <a href="#">HTML5でサイトをつくろう</a></p>
</footer>

</article>

このソースを画像で見る（画像の方が見やすいです）

ブログのTOPページなどは記事の小見出しとして1ページにに数件の記事が見出しとして掲載されているとおもいます。その記事はひとつひとつが独立してその記事を紹介するものなのでarticle要素で囲めます。記事の見出し部分はh1要素や投稿時間を表すtime要素などをheader要素、下部にブログのカテゴリや各種SNSボタンなどを配置する場合はそれらをfooter要素で囲みます。

これはarticle要素の使用例としてイメージもしやすいのでよくHTML5で作られたブログではこのようにしているサイトが多いですし使い方もわかりやすいとおもいます。

記事内に小見出しがある場合

下記のソースのように記事内に中見出しや小見出しが入った際どうでしょうか？

<article>

<header>
<h1>第4回　HTML5で新しく定義された新要素『secion要素』と『article要素』のまとめよう</h1>
<p><time datetime="2011-12-22">2011-12-22</time></p>
</header>

<section>
<h2>secion要素</h2>
<p>secion要素は文章の論理構造を表すための最も基本となる要素。つまり一般的なセクションを表します。この要素はセクショニング・コンテンツに属する要素です。</p>
</section>

<section>
<h2>article要素</h2>
<p>article要素はブログの投稿や一覧、ニュースサイトの記事、サイトの更新情報ページなど、その部分の内容だけを取り出した場合に独立したコンテンツとして成り立つ際に使用します。</p>
</section>

<footer>
<p> カテゴリ : <a href="#">HTML5でサイトをつくろう</a></p>
</footer>

</article>

このソースを画像で見る（画像の方が見やすいです）

このようにブログ記事の中には内容によって中見出、小見出しなどを使う場合がありますので、その際にはセクションを分けるためにsection要素を使用しています。

ただこれは毎日更新をする場合など原稿内容によってセクションを考えてマークアップしなければなりませんので、HTMLの知識が必要になってきます。

また原稿の構成的に適切に出来ない場合もでてきます。こういったことからブログ詳細ページなどでは記事全体をarticle要素で囲みその中は細かくマークアップしないサイトも多くあります。

この辺はどこまで仕様通りにするか悩むところではありますが、WEB制作の仕事ではあくまでお客様の運用の利便性を考えますので、仕様に厳格になりすぎて更新しにくいサイトにしてはいけないと思いますので、製作段階でどこまで作成するかなどマークアップのルール作りをするという形が良いと思います。

ブログ以外のサイトでのarticle要素の使われ方

<section id="news">
<h2>更新情報</h2>

<article>

<header>
<time datetime="2011-12-22">2011年12月22日</time>
<h3>お知らせタイトル01</h3>
</header>

<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>

</article>

<article>

<header>
<time datetime="2011-12-13">2011年12月13日</time>
<h3>お知らせタイトル02</h3>
</header>

<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>

</article>

<article>

<header>
<time datetime="2011-11-29">2011年11月29日</time>
<h3>お知らせタイトル03</h3>
</header>

<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>

</article>

</section>

このソースを画像で見る（画像の方が見やすいです）

このように通常サイトでもよく見る更新情報もRSSフィードにそのまま載っても見出しとその内容として独立しているととらえることができますのでarticle要素を使うことができます。この更新情報全体はそれぞれの項目があるだけなのでarticle要素というよりsection要素にしてみました。

説明のしやすさからarticle要素はブログやニュースサイトの際に便利な要素と思われるかもしれませんが、これらのコンテンツにしか使ってはいけないということはありません。

通常の企業サイトであれば更新情報のエリアに使ったり、ショッピングサイトでしたら商品詳細ページに使用したりすることができます。これらのコンテンツはもしフィードを用意した際に独立したコンテンツといれるからです。もしフィードに流れてもふさわしいか迷った場合には無理に使わずsection要素などを検討してください。

ページのメインコンテンツは必ずしもarticle要素を使えるというわけではない

ページのコンテンツエリアでナビを除いたメインエリアはすべてarticle要素で囲めるということではありません。

article要素を使用するのはそれがフィードに流れもよいかということなので、たとえばブログのTOPページで各記事がいくつか並べられた場合にメインコンテンツをarticle要素で囲むのは不適切になります。このような場合は先にあげたように各記事をarticle要素で囲みます。

またsection要素とarticle要素はどちらが先に書くということもありません。扱う構成、原稿内容にって変わりますのでどちらが先などという優先度のような物で覚えないようにしましょう。

またサイトはいくつかの階層構造を持ちます。たとえば商品が10点あるショップのサイトを作成する際に末端の商品個別ページのメインコンテンツ部分はarticle要素で囲めますが、商品紹介の一覧ページのような目次的なページのメインコンテンツ部分にarticle要素を使うべきではありません。それ自身が独立したコンテンツではないからです。

またひとつの記事が大きな分量の場合に複数のページに分割されたコンテンツはarticle要素にふさわしくありません。記事が分割されている以上、個々のページの記事はひとつの記事全体を表していないからです。この場合はsection要素を使います。

といいましてもこの辺りはそれぞれの原稿によって製作者の考え方によるとおもいます。そこがarticle要素とsection要素の使い方がいまいちピンとこないといわれる理由のひとつかもしれません。

article要素の中にarticle要素をいれる

article要素の中にarticle要素を入れた場合、内側のarticle要素のコンテンツは外側の記事に直接関連するコンテンツでなければいけません。コレはどういう場合が該当するかではブログのコメントなどが想定されています。

<article>

<header>
<h1>HTML5で新しく定義された新要素『secion要素』と『article要素』のまとめよう</h1>
<p><time datetime="2011-01-11">2012-01-11</time></p>
</header>

<section>
<h2>secion要素</h2>
<p>secion要素は文章の論理構造を表すための最も基本となる要素。つまり一般的なセクションを表します。この要素はセクショニング・コンテンツに属する要素です。</p>
</section>

<section>
<h2>article要素</h2>
<p>article要素はブログの投稿や一覧、ニュースサイトの記事、サイトの更新情報ページなど、その部分の内容だけを取り出した場合に独立したコンテンツとして成り立つ際に使用します。</p>
</section>

<footer>
<p>カテゴリ : <a href="#">HTML5でサイトをつくろう</a></p>
</footer>

<section>

<header>
<h2>コメント</h2>
<p>2件のコメントが投稿されました</p>
</header>

<article>

<header>
<p>山田さんのコメント</p>
<p><time datetime="2011-01-17">2012-01-17</time></p>
</header>

<p>sectionとarticleの使い方はわかりにくい</p>
</article>

<article>

<header>
<p>田中さんのコメント</p>
<p><time datetime="2011-01-15">2012-01-15</time></p>
</header>

<p>HTML5の勉強をはじめました</p>

</article>

</section>

</article>

このソースを画像で見る（画像の方が見やすいです）

今までRSSフィードに掲載されても問題のないような内容をarticle要素で囲むという形で書いてきましたが、ブログのコメント欄をそれぞれarticle要素で囲むというのに少し違和感を感じるかもしれませんが仕様にこのような作例もありましたので頭の片隅にいれておくと良いと思います。

これはブログの記事のコメントは、それだけでフォードの対象になることが多く、article要素の条件を満たしていたコンテンツになります。

しかし内側のarticle要素のコンテンツが、外側のarticle要素のコンテンツと関係があったとしても、それだけでarticle要素を使うというわけではないようなので注意する必要があります。

たとえば、記事の著者情報や連絡先情報はフォードのエントリー単位としてふさわしくありません。記事の著者情報などであればp要素などでマークアップして、それをfooter要素などに入れるのがよいでしょう。連絡先情報にはaddress要素が適しています。

今回はarticle要素の使い方の基本をまとめてみました。今回まとめました部分は人によっては違う考えもあるとおもいますのでこれは違うなどございましたらブログの方にご意見いただけますと幸いです。