sectionタグとは?|一つのセクションであることを表す

sectionタグとは?|一つのセクションであることを表す
博士
今回は、文書の章や節といったまとまりを表す<section>タグについて解説するぞ。
 
 
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<section>タグとは

 

<section>

対応ブラウザInternet Explorer / Firefox / Google Chrome / Safari / Opera
分類フロー・コンテンツ / セクショニング・コンテンツ / パルパブル・コンテンツ
利用場所フロー・コンテンツが期待される場所
内容フロー・コンテンツ


 
 
<section>タグは、文書中の章や節といった一つのまとまり(セクション)を表す際に使用します。
section要素の内容には、見出しが含まれているのが一般的です。

HTML5ではセクションを表す要素として、section要素、nav要素article要素aside要素が定義されています。
この中で、一般的なセクションを表す要素がsection要素です。

section要素は、その範囲が意味的な1つのまとまりであることを表します。
例えば、1つの記事内に複数の項目がある場合は、section要素を使って以下のように記述することができます。

 
 
また、以下のようにsection要素を入れ子にすることで、章セクション内の節セクションを表すこともできます。

 
 

他の要素も検討する

複数の要素をグループ化してスタイルを適用したり、スクリプトで操作したりするためにsection要素を使うことは、正しい用法ではありません。
セクションに以下のような意味がある場合には、その意味に適した要素を使用するようにしましょう。

  • そのセクションが1つの完結した記事である場合
    article要素
  • そのセクションがナビゲーションである場合
    nav要素
  • そのセクションが補足的なコンテンツである場合
    aside要素
  • 文書のメインとなる範囲をグループ化したい場合
    main要素

  • レイアウトのためだけにグループ化したい場合
    div要素
  • スクリプトから参照される範囲を示したい場合
    div要素

 
 

博士
適切な使い方を理解しておこう。
 
 

スポンサーリンク

使用例

 
 

表示例

任天堂のゲーム機

ゲーム大好きの筆者が、任天堂のゲーム機紹介します。

ファミリーコンピューター

1983年に発売された家庭用ゲーム機。…

スーパーファミコン

1990年に発売された家庭用ゲーム機。…

 
 

まとめ

文書中のセクションを表す際は、<section>タグを使用します。
 
 

博士
他のセクショニング・コンテンツと上手く使い分けよう。
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








sectionタグとは?|一つのセクションであることを表す