さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【HTML5】section要素について

Pocket
LINEで送る

HTML5におけるsection要素の使用例を紹介します。

section要素は、一般的なセクションをマークアップします。

文章構造の例で紹介したようなブログでの使用例は以下のようになります。

<section>
  <article>
    <h1>記事タイトル</h1>
    <p>記事の本文が入ります。</p>
  </article>
  <article>
    <h1>記事タイトル</h1>
    <p>記事の本文が入ります。</p>
  </article>
</section>

上記の例では記事一覧の固まりをsectionで定義しています。
他にも、article要素の中に区別出来る内容がある場合には、article要素の中でsection要素で区切ることもできます。

<article>
  <h1>記事タイトル</h1>
  <section>
    <h1>記事サブタイトル1</h1>
    <p>記事の本文1が入ります。</p>
  </section>
  <section>
    <h1>記事サブタイトル2</h1>
    <p>記事の本文2が入ります。</p>
  </section>
</article>

このようにsection要素は文章構造により、様々な階層で使用出来ます。

カテゴリー:HP制作, HTML5

コメントを残す

コメント内容