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

この「article要素」は「section要素」とどのように違うのか？ 使い分けはどう考えるのか？ 「article要素」に限らずHTMLの要素とは原稿内容に応じてどの要素を使うかが変わってきます。そして制作者もそのとらえ方によってどれを使うかを迷ってしまうことがあります。まずはブログのフォーマットを例に取って学ぶことが簡単だとおもいますので、そこで使い方を覚えて使っていきましょう。膨大なページ数を作成する案件や運用更新をWEB制作経験者以外が行う場合などには、どの要素の判断に困る場合があります。その際は無理に使わなくてもマークアップすることは可能ですので、まずは基本の概念を理解していきましょう。

解説：（有）ムーニーワークス　林 豊／田崎一成

---

●article要素について

article要素はブログの投稿や一覧、ニュースサイトの記事、サイトの更新情報ページなど、その部分の内容だけを取り出した場合に独立したコンテンツとして成り立つ際に使用します。またブログへのコメント、掲示板の投稿にも使われます。必ずしもそのコンテンツ全文が掲載されていなくてもよいようです。

この独立したコンテンツとはなにか？と思うと思いますが、『RSSフィードで読み込こまれた際に1つの記事として成り立っているか』ということをまずは意識してみましょう。成り立っているならばarticle要素が適しており、そうでなければsection要素など別の要素を検討します。ここでは実際にフィードがあるかないかは関係ないようです。

しかし、記事が成り立っているかという判断はコンテンツによってはわかりにくい部分がありますし制作者の主観もありますので、一概にこの場合はこちらと言えない場合も出てきます。このようなことからよくarticle要素とsection要素のどちらを使えばよいのかわからないという疑問が多くあるのだと考えられます。

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

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

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

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

 

この段階でも実際には、階層を持ったドキュメントになるのですが、マークアップ上は同じ階層に位置しています。
h1要素やh2要素などの見出しレベルによって、暗黙に階層化されていることを示しています。 これはarticle要素の使用例としてイメージもしやすいのでよくHTML5で作られたブログではこのようにしているサイトが多いですし使い方もわかりやすいと思います。

一覧から詳細ページへ入ってからはどうでしょうか？　このように記事の中には中見出しなどを使う場合がありますので、その際にはセクションを分けるためにsection要素を使用しています。

ただ、これは毎日更新をする場合など原稿内容によってセクションを考えてマークアップしなければなりませんし、原稿の構成的に適切に出来ない場合も生じてきます。こういったことからブログ詳細ページでは記事全体をarticle要素で囲みその中は細かくマークアップしないサイトも多くあります。

 

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

---

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

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

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

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

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

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

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

---

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

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

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

また、ブログの記事のコメントはそれだけでフォードの対象になることが多く、article要素の条件を満たしていたコンテンツになります。
しかし、内側のarticle要素のコンテンツが、外側のarticle要素のコンテンツと関係があったとしても、それだけでarticle要素を使うというわけではないようなので注意する必要があります。

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

---

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