HTML5タグ虎の巻

sectionタグ

HTML5

sectionは、ひとつのセクションであることを表すタグです。

解説

ページの中で同じ意味合いの部分を囲ってひとつのセクションとしたい場合に使用します。 例えば、ページの中で複数の章立て構成になっている場合は、一つ一つの章がセクションになります。

ヘッダー部分やフッター部分などもひとつのセクションを表しますが、これらは、header、footerなど専用のタグが用意されています。
専用のタグが用意されているものはそちらを使用してください。

また、sectionの内容の先頭にはセクションの見出しをh1~h6タグを使って指定します。

コンテンツ・モデル

カテゴリー
(自カテゴリ)
フロー・コンテンツ
セクショニング・コンテンツ
コンテキスト
(親カテゴリ)
フロー・コンテンツを許可する場所
コンテンツ・モデル
(子カテゴリ)
フロー・コンテンツ

属性

sectionタグには以下の属性が指定できます。

【主要グローバル属性】
属性説明
classクラスを指定する
(例)class="hoge"
idIDを指定する
(例)id="foo"
styleスタイルを指定する
(例)style="color:red;"
titleツールチップを指定する
(例)title="補足情報です"
tabindexTabキーによる移動の順番を指定する
 正数:指定した数値の順にフォーカス移動される
 負数:フォーカスは可能だが、タブ移動時はフォーカス対象とならない
(例)tabindex="10"

その他のグローバル属性値については、グローバル属性をご覧ください。

サンプル

sectionを使ったサンプル

<section>
 <h2>タイトル</h2>
 <p>サンプルです</p>
</section>

備考

  • sectionタグはスタイルを適用させない限り見た目に変化はありません。
  • HTML5で新規追加となった要素です。

関連項目

  • address:問合せ先を表す
  • article:HTML文章内で記事領域であることを表す
  • aside:補足情報を表す
  • footer:フッター領域であることを表す
  • header:ヘッダー領域であることを表す
  • main:ページのメインコンテンツを表す
  • nav:HTML文章内でナビゲーション領域であることを表す
  • section:ひとつのセクションであることを表す