▼CSS -section- -

■section■

<body>
  <header>
    <h1>私のブログ</h1>
  </header>
  <article>
    <h1>私のブログの投稿</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <aside>
      <!-- この aside は article の中なのでこの aside のコンテンツは、その article そのものに直接的に関係したものだと解釈するはずだ。 -->
      <h1>解説</h1>
      <dd>
        <dt>Lorem</dt>
        <dd>ipsum dolor sit amet</dd>
      </dd>
    </aside>
  </article>
  <aside>
    <!-- この aside は記事の外に出してある。そのため、そのコンテンツがページには関係するが、上の articleに深く関係している訳ではない。 -->
    <h2>ブログロール</h2>
    <ul>
      <li><a href="#">私の友達</a></li>
      <li><a href="#">私の他の友達</a></li>
      <li><a href="#">私の親友</a></li>
    </ul>
  </aside>
</body>

◉aisde：補足情報

asideは、あまり重要でないコンテンツに使う。

ef) ブログロール、補助的な記事・ナビゲーション、ページに関連するのであれば広告にも。

　※article要素の中で使うのであれば、解説など、その記事に関連したコンテンツ。

コンテンツのスタイルのために使わない！

メインのコンテンツほど重要な役割を持たないだけれど、それがページや記事に関連しているなら、ビジュアル、デザインの有無にかかわらずasideが適切。

（asideはサイドバーをコーディングするときに使用してもいい）

◉article：記事

articleは、ブログの記事に投稿されたコメントなど、メインコンテンツとなるような項目をマークアップするときにつかう

◉nav ：ナビゲーション

◉section（×div）

sectionは、文章の構成を示すもの（本の目次を作る感覚で）

見出しとそれに関する内容と続くように、アウトラインになる範囲を定義する領域

（本来、ドキュメントはセクションの固まり／website blog 書籍）

sectionを使う間迷ったら、章や節を表す、h1~h6の見出しが付けれるかどうか考える

（見出しは必ずならず含まれる）

コンテナ要素ではないので、レイアウト目的で使わない（スタイリングのときはdiv）

※CSSでレイアウトするときは、classやidを使う