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

スポンサーリンク

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

スポンサーリンク

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 ドキュメントのセクションとアウトライン

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

コメント