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は特にコロコロと仕様が変わるのでこのページは常に最新の情報を記載するように随時更新します。

Tweet

関連記事:

ワードプレスでウィジェット機能があるサイドバーを複数設置する方法