# セクションしたい（`section`）
```html
記事のタイトル
```
`section`タグは、見出しを持つ内容のまとまり（章・節）を表すタグです。
`article`の中だけでなく、`body`直下や`main`、`aside`の中でも使えます。
長い文書を意味のあるかたまりに区切るときに使います。
見出し（`h1`〜`h6`）が付けられるなら`section`、
付けられないなら`div`を使うのがセマンティクス的に適切です。
## ランディングページしたい
```html
```
サービス紹介ページのように、1ページを「特徴」「料金」「FAQ」などのブロックに分ける場合は、それぞれを`section`タグで囲みます。
`id`を付けて、ページ内リンク（``）のジャンプ先にできます。
## 一覧ページをカテゴリ分類したい
```html
お知らせ
```
記事一覧やお知らせページをカテゴリごとに分けるときにも`section`が使えます。
`section`の中に`article`を並べることもできます。
## サイドバーを分類したい
```html
```
ブログのサイドバーでは、「カテゴリ別」「月別アーカイブ」などの小さなブロックに分類するときにも`section`が使えます。
## 使い分けたい（`div` / `section` / `article`）
::::{mermaid}
graph TD
A[要素をまとめたい] --> B{見出しがある}
B -->|いいえ| DIV[div]
B -->|はい| C{単体で完結できる}
C -->|いいえ| SEC[section]
C -->|はい| ART[article]
::::
`div`は意味を持たないブロック要素です。
ただの装飾やスクリプトのために要素をまとめるときに使います。
`section`は、ある程度の意味のあるまとまりを表すブロック要素です。
それぞれのセクションには必ず見出し（`h1`〜`h6`）を付ける必要があります。
`article`は、単体で完結する内容のまとまりを表すブロック要素です。
:::{hint}
見出しは付くけれど「章」と呼ぶには弱い程度のまとまりなら、`section`にせず`div`のままでかまいません。
:::
## リファレンス
- [section](https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/section)