セクションSections

body要素 

  • body要素は、ドキュメントの内容であることを示す要素。
  • html要素の2番目の要素として、ドキュメントの中に1つだけ配置する。
  • このbody要素内のテキストや要素を、ブラウザに表示する。
  • セクショニング・ルートとなる要素である。

article要素 

section要素 

  • section要素は、ドキュメント(文書)やアプリケーションの一般的なセクションであることを示す要素。
  • section要素の中には、セクションのテーマを括った見出し要素(h1~h6要素)を用意するのが一般的だ。必須ではない。
  • section要素は、セクショニング・コンテンツである。新たなセクションを区画する。
  • 他にふさわしいセクショニング・コンテンツ要素(下記の要素)があれば、それらを検討する。
    • article要素:自己完結する記事であることを示すセクション。
    • nav要素:ナビゲーションであることを示すセクション。
    • aside要素:メインコンテンツでないこと(余談、補足)を示すセクション。
  • レイアウト(スタイリング)目的だけであれば、section要素ではなく、div要素を使う。

nav要素 

  • nav要素は、ナビゲーションであることを示す要素。
  • nav要素内には、グローバル・ナビゲーション、ページ内リンクなどを配置する。
  • 全てのリンクをnav要素で括る必要はない。主なページ、主なコンテンツへのリンクを括り区画する。
  • nav要素は、セクショニング・コンテンツである。新たなセクションを区画する。

aside要素 

h1~h6要素 

  • h1~h6要素は、ドキュメントやセクションの見出しであることを示す要素である。
  • 数値は、見出しのランクを示している。h1が最高ランクで、数が増すほどランクが下がり、h6が最低ランクである。
  • セクションの階層(深度)に合ったランクの見出し要素(h1~h6要素)を使うか、全ての階層でh1要素を使うかを選択できる。1つのページで、2つの使用法を混在させることはできない。
  • h1~h6要素を配置すると、暗黙的に、新たなセクションを区画する。 HTML5は、明示的にセクションを区画することを推奨しているので、明示的に区画した方が良いだろう。 明示的に区画する場合は、セクショニング・コンテンツであるsection要素article要素nav要素aside要素で括る。

header要素 

  • header要素は、ヘッダーであることを示す要素である。
  • header要素内には、ドキュメント(文書)やセクションの見出し、概要、ナビゲーションなどを配置する。
  • header要素内には、ドキュメントやセクションのテーマを括った見出し要素(h1~h6要素)を用意するのが一般的だ。必須ではない。
  • header要素は、セクショニング・コンテンツではない。新たなセクションを区画することはない。

footer要素 

  • footer要素は、フッターであることを示す要素である。
  • footer要素内には、ドキュメント(文書)やセクションの著作権データ、作者、日時などを配置する。
  • footer要素は、ドキュメントやセクションの末尾に配置することが多いが、必須でなはい。先頭に配置しても構わない。
  • 1つのドキュメントや1つのセクション内に、複数のfooter要素を配置しても構わない。
  • footer要素は、セクショニング・コンテンツではない。新たなセクションを区画することはない。

address要素 

  • address要素は、ドキュメント(文書)や記事セクションの連絡先情報であることを示す要素である。
  • 一般的なブラウザは、address要素内のテキストを、イタリック体で表示する。
  • address要素は、footer要素内に配置することが多い。
  • address要素は、セクショニング・コンテンツではない。新たなセクションを区画することはない。