HTML5の構造化タグ article と section の違いとか

HTML5のお勉強、というか改めておさらいです。

HTML4と5の違い
HTML5で使えるようになった構造化タグ
<article> と <section> の違い
1. <article> と <section> の組み合わせ
参考

HTML4と5の違い

ドキュメント先頭の宣言部分が異なります。要は、ここの宣言さえHTML5の書式になっていれば、WEBブラウザはHTML5として認識してくれます。ただ、これだけだと後述する文書の構造化が行われていないため、宣言だけの「なんちゃってHTML5」となります。

HTML4の宣言
<!DOCTYPE html PUBLIC "-// W3C //DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML5の宣言
<!DOCTYPE html>

HTML5で使えるようになった構造化タグ

HTML4時代は<div>タグにidやclass属性で”header”だの”footer”だのと定義していましたが、HTML5では文書構造を表すためのタグが用意されました。
新たに用意されたのは、主に以下のものです。

<header> …. 文書のヘッダー
<footer> …. 文書のフッター
<nav> ……. ナビゲーションリンクなど
<article> … 記事コンテンツ
<section> … 汎用セクション

<html>
  <body>
    <header>...</header>
    <nav>...</nav>
    <article>
      <section>...</section>
    </article>
    <footer>...</footer>
  </body>
</html>

<article> と <section> の違い

これがイマイチ腑に落ちてなかったので調べてみました。

article:
これ単独で切り出されても意味を持つコンテンツ

section:
一般的に見出しの要素<h1>〜<h6>を持つコンテンツ

要は、独立して成り立つもの＝article、そうで無いもの＝section という感じでしょうか。

<section>タグの場合、次のように直後に<h1>タグなどが来るのが一般的。

<section>
  <h1><見出し/h1>
</section>

<article>タグの場合、直後にコンテンツが来る、とか。

<article>記事</article>

<article> と <section> の組み合わせ

<article>の中に<article>

入れ子になる<article>は親要素と関連している（例えば、ブログ記事とコメントとか）ものが含まれるイメージ。

<section>の中に<article>

たとえば、最新記事一覧という<section>に各記事が<article>で埋め込まれるイメージ。

<article>の中に<section>

たとえば、ブログ記事という<article>の中に各見出しを持つ<section>が含まれるイメージ。

参考

HTML5 ドキュメントのセクションとアウトライン

今日のところは、このくらい。