HTML5の「article」と「section」の使い方で迷う

HTML5

先週から構築中のこのブログ。今日はWP-PageNaviプラグインを使用してページナビゲーションを追加しました。　ここでも、<nav>～</nav>でマークアップした方が良いのか迷いますが、ナビゲーションなのでマークアップした方がいいんでしょうね。 さて、今日はそんなHTML5のマークアップで迷い中という話です。

PR

HTML4.01までのHTMLやXHTMLでは、大きく分けてブロックレベル要素とインライン要素の2種類しかありませんでしたが、HTML5から次のように細分化され新しい要素も追加されています。

HTML5のコンテンツモデル

  • メタデータ
  • フロー
  • セクショニング
  • 見出し
  • フレージング
  • 埋め込みコンテンツ
  • インタラクティブコンテンツ

追加された要素にはheader、footer、nav、asideなどは分かりやすくて迷うことはありませんが、タイトルのように「article」と「section」が少々迷います。実際、いくつかサイトを見て回っても使い方は様々。 「article」も「section」も共にセクショニングコンテンツでもあり、フローコンテンツでもあります。だから余計に迷ってしまう。

<article id="content">
    <article>
        <p>コンテンツ１</p>
    </article>

    <article>
        <p>コンテンツ２</p>
    </article>
</article>

<section id="content">
    <section>
        <p>コンテンツ１</p>
    </section>

    <section>
        <p>コンテンツ２</p>
    </section>
</section>

メインのコンテンツ部分を「article」でマークアップし、その中を更に「article」で分けるのもOKのようだし、同じように「section」の中で「section」を使うのも大丈夫そう。また、「article」の中で「section」を使うのもOKみたいだし、逆に「section」の中で「article」を使うのもOK？

<article id="content">
    <section>
        <p>コンテンツ１</p>
    </section>

    <section>
        <p>コンテンツ２</p>
    </section>
</article>

<section id="content">
    <article>
        コンテンツ１
    </article>

    <article>
        コンテンツ２
    </article>
</section>

以前、livedoorブログの記事を表示するタグがarticleだった？という記憶があったので、最初は記事をarticleにしてsectionでメイン部分をマークアップしていましたが、どうも逆の方がスッキリする気がしてきたので、ページナビゲーションを追加したときに逆に変えました。とは言っても見た目は変わらないんですけどね。せっかくなのでページナビゲーションもnavでマークアップしようと思います。

articleとsectionで検索した結果です。参考に

関連記事