本記事は、2025年6月18日に内容を見直してリライトしました。（2024年10月1日に初投稿。）
section 要素、
使っていますか？
div 要素でもいいのかな？？
HTML について断片的に勉強していると、ふと section 要素に出会い、何気なく div 要素の代わりに使ってしまったりしていませんか？
実はちょっとしたルールがあって、そんなに難しいわけではありませんが……それゆえに、あなたにとってのセマンティックを意識したコーディングの核心に近づくきっかけになる要素の１つかもしれません！ぜひ、section 要素のことを知ってみてください！
- section 要素の役割
- section 要素の基本的な使い方
目次
section 要素とは
section（セクション：名詞）の意味は、HTML 要素としては、文章の「節」や「項」、また、コンテンツ内容の「仕切られた場所」とかそんな感じのニュアンスでとらえると良いですね。
馴染みある英単語ですので、とくに深く考えずカタカナの“セクション”の方が、ピンとくるかもしれませんね。
単語
section：（文章の）節、項、セクション（weblio）
section 要素の意味
section 要素は、一般的な“セクション”で、とあるテーマをグループにするコンテンツです。そして、基本的に見出し（h1-h6 要素）を付けます。
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
HTML Living Standard
ちょっと回りくどくなってしまいましたが、大雑把に言えば、『section 要素は、セクションとして汎用的な要素で、見出し（h1-h6）とセットで使う！』って感じです。
見出し（h1-h6）とセットなのは勉強しないと知りえないルールなので、ここはドヤ顔で記述しちゃいましょう！
そもそも“セクション”って何さっ！
“セクション”っていう単語の意味はわかりました。そして、要素としての意味もわかりました。
で、
HTML における、もとい、本件における“セクション”って何なのさっ！てことですよね。
言ってしまえば……
「article 要素」
「aside 要素」
「nav 要素」
「section 要素」 ← 本記事の主役
この４つの要素のことです。
これらは HTML の技術的に「Sectioning content（セクショニングコンテンツ）」というカテゴリに分類される要素です。
少しややこしいのが、header 要素や footer 要素、body 要素、あるいは main 要素も話の流れ（文脈）によってはセクションとして扱われる場合もありますが、これらは「Sectioning content（セクショニングコンテンツ）」には属していません。
何が言いたいのかというと……
今後、いろいろな HTML の勉強をしていく中で、“セクション”というワードがたびたび出てくることと思います。そのワードが、広い意味での“セクション”なのか、あるいはセクショニングコンテンツとしての“セクション”なのか、“section 要素”そのものなのか、そもそも間違った情報なのか、を見極めなられないと、まったくへんてこりんな知識を得てしまう可能性があります。
ですので、「Sectioning content（セクショニングコンテンツ）」というものがあって、それには４つの要素が含まれているということを、とりあえず知っておけば、今後の勉強でのちょっとした道しるべになると思うので、しっかりと押さえておきましょう。
section 要素は
Sectioning content
前項でも軽く触れましたが、
section 要素は、Content models（コンテンツモデル）の概念において、Sectioning content（セクショニングコンテンツ）のカテゴリに属しています。
特徴として、header 要素と footer 要素の適用範囲（スコープ）を定義するコンテンツです。（HTML Living Standard）
つまり、
section 要素内に、header 要素および footer 要素を入れると、その section 要素に属するヘッダーとフッターと解釈されるということですね。
ちなみに、
header 要素と footer 要素は、セクショニングコンテンツ内に入れなくても問題自体はありません。
（片方だけでも問題なし。）
また、「Sectioning content（セクショニングコンテンツ）」は section 要素以外に、article 要素、aside 要素、nav 要素が含まれます。（よく main 要素も上記に含まれると説明されているブログさんがありますが、おそらく間違った情報です。HTML Living Standard や W3C やページに記載されているのはこの４つのみ。）
文字通りセクショニング（グルーピング）するときに使用します。
そして、section 要素は、セクションとして汎用的（generic）な要素ですが、広く汎用的（universal）な要素という意味ではありません。ですので、装飾をするだけのために入れるのであれば div 要素などを使いましょう！
section 要素は
見出し（h1-h6）とセット
section 要素には、基本的に「見出し（h1~h6）」が入ります。
もし、見出しを入れられないのであれば、それはセマンティック的に section 要素を使うのは適切ではない可能性すらあるかと思います。装飾をするだけのために入れるのであれば div 要素を使いましょう！
基本的な記述例
シンプルな記述例です。
<section>
<h2>見出し</h2>
<p>見出しを直に入れるパターン</p>
</section>header 要素を入れた記述例
header 要素を入れた記述例です。
<section>
<header>
<h2>見出し</h2>
</header>
<p>見出しを header 要素に入れるパターン</p>
</section>header 要素を用意してその中に見出しを入れました。例では見出ししか入れていませんが、例えばセクションを作った日や著者を入れたりする場合に header 要素で囲っておく意味が生きてきますね！
section 要素の使い方は
結局センス？？
section 要素の記述方法は、千差万別、さまざまな使い方があるので、いくつか例を載せてみます。
シンプルな使い方
main 要素で囲って、複数のセクションで区分けしたコード例です。
<header>/*ここにヘッダーの内容を入れる*/</header>
<main>
<section>
<h2>セクション１</h2>
<div>/*ここにセクション１の内容を入れる*/</div>
</section>
<section>
<h2>セクション２</h2>
<div>/*ここにセクション２の内容を入れる*/</div>
</section>
<section>
<h2>セクション３</h2>
<div>/*ここにセクション３の内容を入れる*/</div>
</section>
</main>
<footer>/*ここにフッターの内容を入れる*/</footer>header 要素と footer 要素と兄弟関係の位置に main 要素で囲ってあげて、その中に section を量産するとコード的にキレイに整理されてるように見えます。
iPhone のページでも section が使用された構造でしたので参考に。よかったらデベロッパーツールなどで覗いてみてください！（https://www.apple.com/jp/iphone-15-pro/）
article 要素の中にある section 要素
article 要素は、よくニュースサイトやブログとかでも使用する要素です。ざっくりと記事とかを入れ込むときに使います。
<article>
<h2>記事１の見出し</h2>
<section>
<h3>セクション１の見出し</h3>
<div>/*ここにセクション１の内容を入れる*/</div>
</section>
<section>
<h3>セクション２の見出し</h3>
<div>/*ここにセクション２の内容を入れる*/</div>
</section>
</article>こちらの例のように Sectioning content（article 要素）の中に Sectioning content（section 要素）を入れるという使い方はなんだか違和感を感じるかもしれませんが、結構いろいろなサイトで一般的に使用される書き方です。
サントリーさんのクラフトボスの LP で article 要素と section 要素が使われているコードでしたので参考に。（https://www.suntory.co.jp/softdrink/craftboss/tea/）
header 要素と footer 要素の兄弟関係の位置で使う
section 要素をただ並べていて、とてもシンプルに見えますね。
<header>/*ここにヘッダーの内容を入れる*/</header>
<section>
<h2>セクション１の見出し</h2>
<div>/*ここにセクション１の内容を入れる*/</div>
</section>
<section>
<h2>セクション２の見出し</h2>
<div>/*ここにセクション２の内容を入れる*/</div>
</section>
<section>
<h2>セクション３の見出し</h2>
<div>/*ここにセクション３の内容を入れる*/</div>
</section>
<footer>/*ここにフッターの内容を入れる*/</footer>section 要素が並んでいる部分を、何かで囲ってあげる方が“美しい”構造なのかなぁと思ったり思わなかったり、今回本記事をまとめていて感じるようになりました。（例えば main 要素とか。あるいは section 要素や article 要素などて囲ってあげるとか。）
section 要素の中に section 要素
ちょっとややこしいのが、section 要素の中に section 要素を入れるパターンもあるということです。また、article 要素 の中に section 要素を入れていたり、その逆も見かけます。さらに大枠に section 要素で囲ってしまっているパターンもあるようです。
何が正しいかの判断は、結局のところセマンティックな構造になっているかどうかということだと思います。これに関しては section 要素に限らず全ての要素に入れることなので、言われる筋合いもないという感じでしょうか……。
複数人のチームで Web 制作をしているならルールを統一したり、自分一人でやっているなら一番しっくりする（説明できる）方法でコーディングしたいものですね！
section 要素をどのように扱うかは「センス」もあるかと思いますが、セマンティックを意識してコーディングし続けることで、もっともらしい使い方が身につくかと思います！
まとめ
section 要素は、コンテンツモデルにおいて「Sectioning content（セクショニングコンテンツ）」と呼ばれるカテゴリに含まれるの要素の一つです。用途としては、その通りコンテンツのまとまりを“セクショニング”するとき使う要素です。
通常、「見出し（h1-h6）」をセットで入れます。また、section 要素内に header 要素および footer 要素を入れることで、その section 要素内のヘッダーおよびフッターとして解釈されます。
セクションとして汎用的な用途で使われる面からも、さまざまな使い方で記述することができ、便利でありながらやや使い方に迷ってしまいます。初心に帰りセマンティックな意味をよく考えて使うようにしましょう！
参考・出典
weblio. 「sectionとは 意味・読み方・使い方」. https://ejje.weblio.jp/content/section, 2024年6月8日閲覧。
・HTML Living Standard. 「4.3.3 The section element」. https://html.spec.whatwg.org/#the-section-element, 2025年6月16日閲覧。
・W3C. 「4.3.3 The section element」. https://html.spec.whatwg.org/multipage/sections.html#the-section-element, 2024年6月8日閲覧。
・Apple. 「iPhone 15 Pro」. https://www.apple.com/jp/iphone-15-pro/, 2024年6月18日閲覧。
・サントリー. 「クラフトボスTEA」. https://www.suntory.co.jp/softdrink/craftboss/tea/, 2024年6月18日閲覧。
・青森りんご. 「りんごの品種」. https://www.aomori-ringo.or.jp/variety/, 2024年6月20日閲覧。
