HTML5から導入されたsectionとarticle要素は、ウェブコンテンツの構造化に役立つ要素です。しかし、その使い分けが曖昧になることがあります。ここでは、自分なりの使い方と使い分けのポイントについてまとめてみようと思います。

Sectionプロパティ

sectionプロパティは、主にページ内のセクションやテーマを区切るために使用されます。具体的な内容としては、トップページのグループ化されたコンテンツを分けるときなどに使えそうです。

<section id="about-us">
  <h2>私たちについて</h2>
  <p>私たちの使命と価値観。</p>
　<button><a>もっと見る</a></button>
</section>
<section id="contact">
  <h2>製品情報</h2>
  <p>ラインナップ</p>
　<button><a>もっと見る</a></button>
</section>

その他にはブログ記事内の<h2>で囲まれたグループ（タイトルを<h1>とした場合）や固定ページのセカンドレベルの見出しが付いたグループに使ってもいいでしょう。

<div class="content">
  <h1>私たちについて</h1>
  <section>
    <h2>サービス</h2>
    <p>.....</p>
  </section>
  <section>
    <h2>選ばれる理由</h2>
    <p>.....</p>
  </section>
　<section>
    <h2>ヒストリー</h2>
    <p>.....</p>
  </section>
</div>

定義として「論理的にグループ化されるもの」にはsectionプロパティが使えます。使える範囲が広いプロパティですが考慮される点をMDN Web Docsでは下記のように示しています。

• 内容が文書のメインコンテンツを表す場合は、 <main> を使用。
• 内容が、メインコンテンツと一緒に機能する有用な付帯情報を表しているものの、メインコンテンツの一部ではない場合（関連リンクや著者の経歴など）は、 <aside> を使用。
• スタイル付けのためのラッパーとしてのみ使用する場合は、 <div> を使用。

引用：MDN Web Docs

これに従えば使うべき場所も判断しやすくなりますね。あとはarticleプロパティをどう使い分けるかという事でしょう。

Articleプロパティ

<article>要素は、独立して配布または再利用可能な内容を表します。ブログの投稿、ニュース記事、フォーラムの投稿、ユーザーレビューなど、自己完結型のコンテンツに使用されます。

この要素の内容が単独の、自立した記事として配信されて意味のある不可分の単位のコンテンツ（例えば、ブログ投稿やブログのコメント、新聞記事など）を表す場合は、<article> 要素を使用したほうがいいでしょう。

引用：MDN Web Docs

下の例を見てみましょう

<article>
  <h2>新製品の発表</h2>
  <p>本日、新しいスマートフォンモデルを発表しました。</p>
  <p>詳細は以下の通りです。</p>
</article>

<article>
  <h2>イベントレポート</h2>
  <p>先週末に開催された技術カンファレンスのレポートです。</p>
</article>

この例では、それぞれが独立した記事として意味を持つ、「新製品の発表」と「イベントレポート」を<article>で明示しています。これを見ると<section>でも間違いではないことに気づきます。しかし「独立した記事として意味を持つ」という点で<article>の方が適切だと言えそうです。

違いと使い分け

主な違い

• <section>: 内容をテーマごとにグループ化するための要素。主に文書の構造を論理的に整理するために使用される。
• <article>: 独立して配布可能な内容を表す要素。自己完結型のコンテンツに使用される。

内容が独立しているかどうか

• 独立している: <article>を使用。例えば、ブログの投稿やニュース記事。
• 独立していない: <section>を使用。例えば、文書の一部としてのセクション。

再利用の可能性があるかどうか

• 再利用可能: <article>を使用。例えば、RSSフィードで配信される記事。
• 再利用不可: <section>を使用。例えば、サイト内の特定のセクション。

このように、<section>と<article>を適切に使い分けることで、コンテンツの意味と構造が明確になります。HTML5のセマンティックな要素を活用して、読みやすく、維持管理しやすいウェブページを作成していきましょう。