sectionとarticleの使い方

レイアウトのために使わない

レイアウトの枠組みとして使わない。
例えば、2カラムのレイアウトの場合、
枠組みとしては、div等を使用し、内容についてはsectionで囲むようにマークアップするのが無難かなと考えます。

HTML の<section>要素は、文書の自立した一般的なセクション (区間) を表します。そのセクションを表現するより意味的に具体的な要素がない場合に使用します。少数の例外を除いて、セクションには見出しを置いてください。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/section

2カラムの例(ヘッダーやフッターは端折ってます)


<div class="wrap">
  <div class="main">
    <h1>コンテンツタイトル</h1>
    <section>
      <h2>セクションタイトル</h2>
      <p>コンテンツ</p>
    </section>
  </div>
  <div class="sidebar">
    <nav class="menu">
      メインナビゲーション
    </nav>
  </div>
</div>

sectionは文章の構造上、『節』や『項』(章>節>項)になるブロックを囲む場合に使用する。無理にsectionを使う必要はないので、div class=”section” と対応してもOKです。

sectionとarticleをどう使い分けるか

<section>と<article>の使い方としては、それぞれが持つ意味を知っておく必要があります。
気をつけたいのは『article』の使い方。
articleとは「単体で完結できる独立したもの(自己完結した構成)」ということなので、一般的なWEBサイトであれば「新着情報」や「お知らせ」など、そこを読めば理解できるブロックでの使用に適しているとされています。
また最近のブログテンプレート等では、個別ページの記事内容を囲むブロックでよく使用されています。
つまり、上記以外のブロックをsectionで囲めばいいとなりますが、実際のところ、文脈や意味など考えるとよくわからないままsectionやarticleを使わず、divで構築するほうが無難といえます。

HTML の<article>要素は文書、ページ、アプリケーション、サイトなどの中で自己完結しており、 (集合したものの中で) 個別に配信や再利用を行うことを意図した構成物を表します。例えば、フォーラムの投稿、雑誌や新聞の記事、ブログの記事、商品カード、ユーザーが投稿したコメント、対話型のウィジェットやガジェット、その他の独立したコンテンツの項目が含まれます。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/article

sectionの使用例


<section>
  <h1>コンテンツタイトル<h1>
  <p>テキスト</p>
  <section>
    <h2>セクションタイトル</h2>
    <p>テキスト</p>
  </seciton>
  <section>
    <h2>セクションタイトル</h2>
    <p>テキスト</p>
  </seciton>
</seciton>

articelの使用例(ブログ記事等での例)


<article>
  <header>
    <h1>記事タイトル</h1>
  </header>
  <p>
  内容
  </p>
  <footer>
    投稿日時や記事に関する情報やSNSボタンをいれてもいいかも
  </footer>
</article>

上記はあくまでも例なので、実際に構築するサイト構造・文脈に合わせて工夫してみてください。