section 要素、使ってますか？
div 要素でもいいのかな？なんか section を使ってた方が見やすいコードな気がして、たまに使ったりしてましたが、正しい使い方ってよくわからなかったので、今回調べてみました。
section の意味は？
section（セクション：名詞）の意味は、（とく深く考えずに）そのまま“セクション”ってイメージでいいような気がします！あえて日本語にするのであれば、Web においては、文章の「節」とか、コンテンツ内容の「区切り」とかそんな感じのニュアンスだと思います。
単語
section：（文章の）節、段落、項、セクション（weblio）
section 要素は汎用的な要素です。似たように「p」要素や「div」要素もコンテンツを分割するために汎用的に使用したりしますが、「section」要素はもっと大きな括りで使用されるイメージです。どちらかと言えば「header」要素や「footer」要素に近い存在でしょうか。。（←正確には、article、asaide、nav 要素のほうが近い存在。 ）
どうやってセクショニングするかはまた別の問題……。
section 要素は
「Sectioning content」
section 要素は、コンテンツモデルの概念で「Sectioning content」というカテゴリに分類されます。
特徴として、header & footer 要素の適用範囲（スコープ）を定義するコンテンツです。（W3C）
……。
つまりどういうことだってばよ？？？
「Sectioning content」である section 要素内には、header 要素および footer 要素を入れることが可能です。セマンティック的にその header 要素と footer 要素は親要素である section 要素の“ヘッダー”および“フッター”として扱われます。という特徴があるということです。
もっとかんたんに言うなら、
header 要素および footer 要素が、section 要素内に配置されると、それらは親要素である section 要素の“ヘッダー”および“フッター”として解釈されます。
ちなみに、
入れなくても問題ありません。
（片方だけでも問題なし。）
また、「Sectioning content」は section 要素以外に、article、aside、nav 要素などが含まれます。（たまに main 要素も上記に含まれると説明されているブログさんがありますが、たぶん W3C のページに記載されているのはこの４つなので、間違った情報のような気がします。）
文字通りセクショニングするときの選択肢として使うっていうのが分かりやすいのかなぁと思います。ちなみに、section 要素は汎用的な Sectioning content なので、“セクショニングする”際にsection 以外に選択肢がない場合に使用するべき要素ということです。装飾をするだけのために入れるのであれば div 要素を使うべきです。
section 要素には「見出し」を入れることが推奨される
section 要素には通常「見出し（h1~h6）」が入ります。もし見出しを入れられないのであればそれはセマンティック的に section 要素を使うのは適切ではない可能性すらあるかと思います。繰り返しますが装飾をするだけのために入れるのであれば div 要素を使いましょう！
前述の「section 要素には header 要素を入れることが可能」という部分に着目すると、section 要素に「見出し」を入れるのは２パターンあるのかなぁと思いました。
<section>
<h1>見出し</h1>
<p>見出しを直に入れるパターン</p>
</section>１つ目のパターンは、シンプルに見出しを section 直下に入れたパターンですね。
<section>
<header>
<h1>見出し</h1>
</header>
<div>
<p>見出しを header 要素に入れるパターン</p>
</div>
</section>２つ目のパターンは、header 要素を用意してその中に見出しを入れました。例では見出ししか入れていませんが、例えばセクションを作った日や著者を入れたりする場合に header 要素で囲っておく意味が生きてきますね！
ただし、このパターンは少しコードが煩雑になりそうなのでよく整理する必要があるかと思います。（また、header 要素の下に div で囲いましたが、これは例としてです。特に決まりはないので、一番しっくりくる構造にするのが良いかと思います。それは main 要素であったり、article 要素であったり千差万別でしょうか。。めちゃむずかしい。。）
section 要素の使い方は
結局センス？？
section 要素の使い方をいろいろ調べてみたのですが、正解がなく、難しくて、うまくまとめられなかったのでパターンとしてまとめてみました。
シンプルな使い方
個人的に腑に落ちる使い方です。
<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 要素は記事とかを入れ込むときに使います。（ほんとにざっくり。。）
<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>セクションが並んでいるところを、何かで囲ってあげる方がたしかに“美しい”構造なのかなぁと今回本記事をまとめていて感じるようになりました。（例えば main 要素とか。あるいは section 要素や article 要素などて囲ってあげる。）
section の中に section
ちょっとややこしいのが、section 要素の中に section 要素を入れるパターンもあるということです。また、article 要素 の中に section 要素を入れていたり、その逆も見かけます。さらに大枠に section 要素で囲ってしまっているパターンもあるようです。
何が正しいかの判断はセマンティックな構造になっているかどうかということだと思います。これに関しては section 要素に限らず全ての要素に入れることなので、言われる筋合いもないという感じでしょうか……。
正義の反対はまた別の正義。的な。
複数人のチームで Web 制作をしているならルールを統一したり、自分一人でやっているなら一番しっくりする(説明できる)方法でコーディングしたいものですね！
section 要素をどのように扱うかは「センス」もあるかと思いますが、セマンティックを意識してコーディングし続けることで、もっともらしい使い方が身につくかと思います！
まとめ
section 要素は、コンテンツモデルにおいて「Sectioning content」と呼ばれるカテゴリに含まれるの要素の一つです。用途としては、その通り“セクショニングするとき”に使うという選択肢が出てくる要素なのかなぁと思います。
section 要素の推奨されるルールとして、section 要素内には「見出し」を入れます。また、section 要素内に header 要素および footer 要素を入れることで、その section 要素内のヘッダーおよびフッターとして解釈されます。
section 要素自体の配置場所は良くも悪くも自由度が高い汎用性の高い要素という印象。サイト内容に合わせて上手に使えるようになりたいものです。。
大手日本企業のサイトのソースを覗いてみると、意外と section 要素を活用していないサイトが多い印象です。。いまだに浸透していない「html 5」の要素の一つなのかなぁと思いました。何となくすたれていきそうな予感。
出典・参考
weblio. 「sectionとは 意味・読み方・使い方」. https://ejje.weblio.jp/content/section, 2024年6月8日閲覧。
・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日閲覧。
