article要素とsection要素の使い方

マークアップ例でみる使い分け方

次のコードはブログの記事ページを想定したマークアップ例です。

記事ページのマークアップ例

<article>
  <header>
    <h1>記事タイトル</h1>
    <p class="text_excerp">記事の紹介分。記事にどんな内容が書かれているか</p>
    <figure><img src="images/main.jpg"></figure>
  </header>
  <h2>記事の小見出し</h2>
  <p>ここには記事本文が入ります。</p>
  <section>
    <h2>SNSシェア</h2>
    <ul>
      <li><a href="#">Facebook</a></li>
      <li><a href="#">Twitter</a></li>
      <li><a href="#">Hatenaブックマーク</a></li>
    </ul>
  </section>
  <section>
    <h2>おすすめ記事</h2>
    <ul>
      <li><a href="#">他の記事タイトル1</a></li>
      <li><a href="#">他の記事タイトル1</a></li>
      <li><a href="#">他の記事タイトル3</a></li>
    </ul>
  </section>
</article>

ページのコンテンツ本体である記事全体をarticle要素で囲み、「SNSシェア」や「おすすめ記事」はsection要素で囲みます。

テクノロジー関連のニュースサイト「WIRED」は、記事ページのHTML構造が非常に分かりやすいです。
自律走行車の普及は、都市を本当に「幸せ」にするのか？ – WIRED.jp

ページの上部では、SNSの共有部分がsection要素、記事本文がarticle要素、そしてコンテンツと直接関係ない広告をaside要素でマークアップしています。

ページを下部へスクロールすると、関連記事、関連タグ、SNS共有ボタンがそれぞれsection要素で囲み、それぞれを区分けしています。
ちなみに、右サイドの注目記事や最新記事もsection要素で囲んでいます。

続いて、記事一覧ページのマークアップも確認してみます。
トップページ(記事一覧) – WIRED.jp

記事詳細ページと同様に、SNS共有ボタンはsection要素、右側の広告はaside要素でマークアップされています。
一覧にある記事は個々にarticle要素でマークアップされています。
記事一覧はul要素とli要素でリストとしてマークアップされることも多いですが、このあたりはどちらが正しいかというよりもコーダーの裁量によります。

記事一覧ページのマークアップ例は次のようになります。
(※上記のWIREDのコードとは関係のない、あくまで簡単なマークアップ例を紹介するためのコードです)

記事一覧のマークアップ例

<main>
  <article>
    <h2><a href="#">記事タイトル1</a></h2>
    <p>記事の紹介文</p>
  </article>
  <article>
    <h2><a href="#">記事タイトル2</a></h2>
    <p>記事の紹介文</p>
  </article>
  <article>
    <h2><a href="#">記事タイトル3</a></h2>
    <p>記事の紹介文</p>
  </article>
  <article>
    <h2><a href="#">記事タイトル4</a></h2>
    <p>記事の紹介文</p>
  </article>
</main>
<aside>
  <section>
    <h2>よく読まれている記事</h2>
    <ul>
      <li><a href="#">記事タイトル1</a></li>
      <li><a href="#">記事タイトル2</a></li>
      <li><a href="#">記事タイトル3</a></li>
    </ul>
  </section>
  <section>
    <h2>最新記事</h2>
    <ul>
      <li><a href="#">記事タイトル1</a></li>
      <li><a href="#">記事タイトル2</a></li>
      <li><a href="#">記事タイトル3</a></li>
    </ul>
  </section>
</aside>