section要素

最終更新日：2023-10-09
公開日：2016-01-19

ページのセクションを分ける場合に使用します。セクションとはコンテンツの一定のグループ単位を指します。

HTML サンプルコード

<article>
  <header>
    <h1>section要素の使い方</h1>
    <p><time datetime="2016-01-19">2016年1月19日</time></p>
  </header>
  <section>
    <h2>サンプルコード</h2>
    <p>section要素のサンプルコードです。</p>
  </section>
  <section>
    <h2>セクション2</h2>
    <p>section要素のサンプルコードです。</p>
  </section>
</article>

カテゴリー

フローコンテンツ、セクショニングコンテンツ、パルパブルコンテンツ
コンテンツモデル

フローコンテンツ
使用ケース

フローコンテンツが期待される場所

属性

グローバル属性: グローバル属性のみ使用することができます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。

使用例

ブログの記事一覧を想定したサンプルコード

セクションを「新着順」と「人気順」の2つに分けたケースになります。
サイドメニューなどでよく使われるコード形式です。

HTML コード例

<aside>
  <h1>記事一覧</h1>
  <section>
    <h2>新着順</h2>
    <article>
      <h3>記事タイトル1</h3>
      <p><time datetime="2016-01-19">2016年1月19日</time></p>
      <p>記事の概要</p>
    </article>
    <article>
      <h3>記事タイトル2</h3>
      <p><time datetime="2016-01-15">2016年1月15日</time></p>
      <p>記事の概要</p>
    </article>
    <article>
      <h3>記事タイトル3</h3>
      <p><time datetime="2016-01-12">2016年1月12日</time></p>
      <p>記事の概要</p>
    </article>
  </section>
  <section>
    <h2>人気順</h2>
    <article>
      <h3>記事タイトル1</h3>
      <p><time datetime="2015-12-25">2015年12月25日</time></p>
      <p>記事の概要</p>
    </article>
    <article>
      <h3>記事タイトル2</h3>
      <p><time datetime="2015-12-30">2015年12月30日</time></p>
      <p>記事の概要</p>
    </article>
    <article>
      <h3>記事タイトル3</h3>
      <p><time datetime="2016-01-03">2016年1月3日</time></p>
      <p>記事の概要</p>
    </article>
  </section>
</aside>

記事一覧