セクションとは
今回登場するのはセクションで、これは前回の見出しと深い関係があります。
セクションというのは、文書におけるテーマごとの枠組みです。そういうと難しく聞こえますが、そうでもありません。実は、見出し1つにつき1つセクションがあるのです。
前回、見出しというのは文章や節につく題名と説明しました。見出しの配下に段落などがあり、それらが見出しに属しているのでした。この、見出しと、その配下の文章を合わせたまとまりをセクションというのです。例えば、次のサンプルを見てみます。
<h1>セクションのサンプル</h1>
<p>この文書はセクションのサンプルです。
<h2>セクションとは</h2>
<p>セクションは、テーマごとの枠組みです。</p>
<p>HTML5では非常に大事なものです。</p>
<h2>セクションの作り方</h2>
<p>セクションは、見出しが…（略）</p>
<h1>見出し</h1>
<p>文章</p>
これを実際に表示すると、次のようになります。
セクションのサンプル
この文書はセクションのサンプルです。
セクションとは
セクションは、テーマごとの枠組みです。
HTML5では非常に大事なものです。
セクションの作り方
セクションは、見出しが…（略）
見出し
文章
線で囲まれた部分がいくつもあると思いますが（ない場合はCSSが正しく動作しているか確かめましょう）、それがセクションです。これを見ると、全部で4つのセクションがあることが分かります。
セクションの一番最初には見出しがきていると思います。それが、そのセクションを司る見出しです。
このように、セクションは見出しによって自動的に作られるのです。ちなみに、今回線が出ているのは見やすくしているだけで、実際はセクションが線で囲まれたりしません。現に、このページにも見出しがあるのでセクションが出来ていますが、枠線などは表示されていませんね。
また、h1要素の見出しで作られたセクションは、h2要素で作られたセクションを内包しています。これは入れ子関係ですね。あるセクション（話題）が、さらに複数のセクション（話題）に分かれているというのもよくあることです。
セクションを作る
さて、セクションは、見出しによって作られるものでした。つまり、見出しを置けば勝手にセクションが作られるのです。これを暗黙のセクションなどと言います。
これに対し、明示的にセクションを作る方法があるのです。それはどういう方法かというと、section要素を使う方法です。
section要素で囲んだ範囲は、1つのセクションとなります。具体的にセクションの範囲がどこであるかを、section要素によって示すことができるのです。例えば、さっきのサンプルを見てみましょう。
<h1>セクションのサンプル</h1>
<p>この文書はセクションのサンプルです。
<h2>セクションとは</h2>
<p>セクションは、テーマごとの枠組みです。</p>
<p>HTML5では非常に大事なものです。</p>
<h2>セクションの作り方</h2>
<p>セクションは、見出しが…（略）</p>
<h1>見出し</h1>
<p>文章</p>
これは、見出しによって暗黙のセクションが作られていますが、これをsection要素を用いて表現すると次のようになります。
<section>
<h1>セクションのサンプル</h1>
<p>この文書はセクションのサンプルです。
<section>
<h2>セクションとは</h2>
<p>セクションは、テーマごとの枠組みです。</p>
<p>HTML5では非常に大事なものです。</p>
</section>
<section>
<h2>セクションの作り方</h2>
<p>セクションは、見出しが…（略）</p>
</section>
</section>
<section>
<h1>見出し</h1>
<p>文章</p>
</section>
このようにすると、明示的にセクションを作ったことになります。
この場合だと見出しがなくてもセクションを作ることができますが、基本的にセクションには見出しが必要です。
section要素
要素の種類
セクショニング・コンテンツ。
子
フロー・コンテンツ。
意味
セクション。
セクションの入れ子関係
さっきも見たように、セクションは入れ子にすることができました。それは、見出しの大きさで表されていたのです。
具体的には、h1の見出しでできたセクションが、h2の見出しのセクションを内包しています。同様に、h3を使えば、h2の見出しのセクションをさらに複数のセクションに分割することができます。
これらの入れ子関係は、見出しの大きさによって表されてきました。
ところが、section要素を使ってセクションを作った場合、section要素の入れ子構造がそのままセクションの入れ子構造になっています。そのため、この場合、見出しの大きさが入れ子関係に影響を及ぼしません。
つまり、明示的にセクションを作れば、見出しの大きさは何でもいいのです。だから、次のようにして構いません。
<section>
<h1>セクションのサンプル</h1>
<p>この文書はセクションのサンプルです。
<section>
<h1>セクションとは</h1>
<p>セクションは、テーマごとの枠組みです。</p>
<p>HTML5では非常に大事なものです。</p>
</section>
<section>
<h1>セクションの作り方</h1>
<p>セクションは、見出しが…（略）</p>
</section>
</section>
<section>
<h1>見出し</h1>
<p>文章</p>
</section>
さっきh2だった見出しがh1になりました。section要素が入れ子関係を示しているおかげで、見出しの大きさがどうであってもアウトライン（セクションの構造）は変わらないのです。
もしこれでsection要素が無いと、全部見出しがh1なのでこのような入れ子関係ではなくなってしまいます。
ちなみに、body要素全体も1つのセクションとみなされます。つまり、
<body>
<h1>見出し</h1>
（中略）
</body>
というようにした場合、この見出しによって暗黙のセクションができるのではなく、body要素によってできたセクションの見出しになるということです。
今まで見てきたように、HTMLというのはセクションの集まりです。次回から、このセクションについてより詳しく解説していきます。