sectionとarticleの使い方

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

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

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

<div id="wrap">
  <div id="main">
    <section>
      コンテンツ
    </section>
  </div>
  <div id="side">
    <nav>
      サイドバー等
    </nav>
  </div>
</div>

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

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

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

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>

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