html5のsectionの使い方

html5

html5におけるsectionタグのマークアップ。
html5も登場してからこれまで仕様の変更が幾度となくされてきています。

そこでhtml5を導入する際によく悩むことになる”section”タグの使い方について説明したいと思います。

sectionタグとは?

sectionとは英語で”節”や”章”を表します。
よく小説などの”章”を思い出してもらうとわかりやすいと思いますが、本の中には章があり、章ごとにタイトルがあり内容が記載されていると思います。

それをhtmlに置き換えてみると
本の内容は<article>タグ
章は<section>と分けることができます。

で、それらをまとめたものが<main>タグとなります。

sectionの具体的な使い方

具体的な使い方は

<main>
 <article>
 <h1>あらすじ</h1>
 <p>あらすじがここに記載されます</p>
  <section>
  <h1>第1章</h1>
  <p>第1章の内容</p>
  </section>
  <section>
  <h1>第2章</h1>
  <p>第2章の内容</p>
  </section>
  <section>
  <h1>第3章</h1>
  <p>第3章の内容</p>
   <section>
   <h1>第3章の2</h1>
   <p>第3章の2内容</p>
   </section>
  </section>
 </article>
</main>

のように記載します。
sectionは入れ子にすることができます。
見出しは必須です。
もし見出しを自然な形で設置することが出来ない場合はsectionを使うべきではないです。

以上、わかりましたでしょうか?
html5は特にコロコロと仕様が変わるのでこのページは常に最新の情報を記載するように随時更新します。


コメントを残す

メールアドレスが公開されることはありません。