『article要素』 / HTML5新要素一覧　

article要素

それ自体で独立したコンテンツとして成り立つ自己完結したものを表します。

article要素の独立したコンテンツとは

article要素を使用するには、その内容だけを取り出した場合に独立したコンテンツとして成り立つかを考えなければなりません。では、独立したコンテンツとはなんでしょうか？

私はなかなか理解できませんでしたが、article要素について調べていくと『RSSフィードで読み込んで1つの記事として成り立っているかを考える』と書いてある記事をみつけ大変参考になりました。

例えば、RSSフィードの記事といえばブログの記事エントリーがまず思い浮かぶと思います。実際に『HTML5でサイトをつくろう』ブログもその条件を参考にエントリーごとarticle要素で囲うようにしています。

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

article要素の使用方法

サイトのニュース情報とは具体的になんでしょう。例えば、靴屋なら”新作が入荷しました!”、学校関係なら”セミナー開催決定！”などの情報になるかと思います。

より理解を深める為に架空の美容室が新サービス(BeautyColor)を開始したと仮定して、その詳細ページを考えてみます。

<article>
    <h1>BeautyColor</h1>
    <p>当店オリジナルの魔法のカラーリング・・・・・・・・</p>
        <section>
            <h2>BeautyColorのサービス詳細</h2>
            <dl>
                <dt>価格：</dt>
                <dd>○○○○円</dd>
                <dt>内容：</dt>
                <dd>カット + カラーリング</dd>
            </dl>
        </section>
</article>

架空の新サービス（BeautyColor）をarticle要素でマークアップしてみましたが、実際にこの部分を抜き出してみたらどうでしょうか。記事タイトルと内容があり一つの記事として成り立っているのでRSS配信しても問題ないと思います。

article要素の中にarticle要素が入る場合

article要素の中にarticle要素を入れた場合は、外側のarticle要素に直接関連した記事でないといけません。

例えば、ブログのコメントなどがこれにあたると考えられているようです。

<article>
	<header>
    	<h1>『article要素』 / HTML5新要素一覧　</h1>
    </header>
    <p>独立したコンテンツ・・・・・・・・・。 </p>
    	<section>
            <h2>article要素とは</h2>
            <p>独立したコンテンツ・・・・・・・・・。</p>
        </section>
	<footer>Post by html5memo</footer>
    <section>
        <h2>コメント</h2>
        <article>
        	<header>
            	<h3>なつみさんのコメント</h3>
			</header>
            <p>私もarticle要素は・・・・・。</p>
        <article>
        <article>
        	<header>
            	<h3>ゴンタさんのコメント</h3>
			</header>
            <p>article要素についてですが・・・・・。</p>
        <article>
    </section>
</article>

なつみさんとゴンタさんのコメントをそれぞれarticle要素で囲っていますが、どちらも外側のarticle要素に直接的に関連があり、ブログのコメントはフィードの対象にもなることから、article要素の中にarticle要素を使用することが可能となります。

以上で、今回の勉強を終わろうと思いますが、article要素はマークアップする人によって独立してるかどうかで判断が変わってくると感じました。より明確な判断方法などありましたらまた追記メモしたいと思っています。

参考サイト：

• HTML5のarticleとsectionの違いを書いてみた　【 Web Design KOJIKA17】
• article 要素　【HTML5.JP】

今回の記事で参考にした本

徹底解説HTML5マークアップガイドブック

HTML5の新要素や基本的なマークアップ方法について丁寧に解説が書かれています。
HTML5でサイトを構築する際やこのBlogの記事を書く時の参考にしています。他にもビジュアル系API編もcanvas要素の勉強用に持っています。

徹底解説HTML5マークアップガイドブック
最終草案対応版―全要素・全属性完全収録

「最終草案対応版―全要素・全属性完全収録」としてverが変わりました。すでに同じ本を持っている場合は追加で買わなくても大丈夫だとおもいましたがなにがなくなって追加されたか興味がありましたので両方買って見ました。

ブログを作成する際に参考にした本はこちらにまとめてあります。