りんご
とってもおいしい果物！
りんごはリンゴの木になる果実です。
レッドデリシャス
『レッドデリシャス』は、多くのスーパーマーケットで見られる最も一般的な品種です。
グラニースミス
『グラニースミス』は、ジューシーな青りんごでアップルパイの材料に最適です。
<section>タグは、一般的なセクションを表す際に使用します。
セクションとは、文書やアプリケーションのなかのテーマごとに区切られたコンテンツのひとまとまりです。
例えば、イントロダクション、各ニュース項目、連絡先情報などを、それぞれセクションにすることで、
文書をコンテンツのまとまりごとに分割できるかもしれません。
section要素を単なるコンテナ要素として使用するのは不適切です。
スタイリング目的やスクリプト作成の便宜のためにのみ要素が必要な場合、
section要素ではなくdiv要素を使用することが推奨されています。
section要素よりもarticle要素の方が適切な場合があります。
セクションがブログエントリやニュース記事などの自己完結する内容である場合、
section要素の代わりにarticle要素を使用するほうが適切でしょう。
その部分に見出しを付けられるかどうか検討してみるのも良いでしょう。
セクションに見出しは必須ではありませんが、通常h1-h6要素で指定する見出しを持つことができます。
見出しを付けることができない部分を、section要素でマークアップするのは不適切と言えるでしょう。
以下のサンプルは、卒業式の式次第と卒業生リストの2つのセクションからなります。
<!DOCTYPE html>
<html lang=ja>
<head>
<title>卒業式 2022年夏</title>
</head>
<body>
<h1>卒業</h1>
<section>
<h2>式次第</h2>
<p>オープニング行列</p>
<p>卒業生総代のスピーチ</p>
<p>学級委員長のスピーチ</p>
<p>卒業証書の授与</p>
<p>校長による閉会の辞</p>
</section>
<section>
<h2>卒業生</h2>
<ul>
<li>モリー・カーペンター</li>
<li>アナスタシア・ルッチョ</li>
<li>エベネザー・マッコイ</li>
<li>カリン・マーフィー</li>
<li>トーマス・レイス</li>
<li>スーザン・ロドリゲス</li>
</ul>
</section>
</body>
</html>オープニング行列
卒業生総代のスピーチ
学級委員長のスピーチ
卒業証書の授与
校長による閉会の辞
以下のサンプルでは、article要素に指定されたりんごに関する記事のなかに、2つのsection要素が含まれています。
<article>
<hgroup>
<h2>りんご</h2>
<p>とってもおいしい果物！</p>
</hgroup>
<p>りんごはリンゴの木になる果実です。</p>
<section>
<h3>レッドデリシャス</h3>
<p>『レッドデリシャス』は、多くのスーパーマーケットで見られる最も一般的な品種です。</p>
</section>
<section>
<h3>グラニースミス</h3>
<p>『グラニースミス』は、ジューシーな青りんごでアップルパイの材料に最適です。</p>
</section>
</article>とってもおいしい果物！
りんごはリンゴの木になる果実です。
『レッドデリシャス』は、多くのスーパーマーケットで見られる最も一般的な品種です。
『グラニースミス』は、ジューシーな青りんごでアップルパイの材料に最適です。
以下のサンプルでは、section要素としてマークアップした章と付録のクラス名を付け分けて、CSSでそれぞれのヘッダーを異なるスタイルにしています。
<style>
section.chapter, section.appendix { border: double medium; margin: 2em; }
section.chapter h2 { color:navy; font: 2em Roboto, Helvetica Neue, sans-serif; }
section.appendix h2 { color:green; font: small-caps 2em Roboto, Helvetica Neue, sans-serif; }
</style>
<header>
<hgroup>
<h1>著書の紹介</h1>
<p>簡単に内容を紹介します。</p>
</hgroup>
<p><small>AZ出版社 発行</small></p>
</header>
<section class="chapter">
<h2>第一章</h2>
<p>第一章は、物語の始まりです。</p>
<p>彼はある町に生まれ、成長していきます。</p>
</section>
<section class="chapter">
<h2>第二章</h2>
<p>第二章は、彼に試練が訪れます。</p>
<p>試練を克服するため、彼は奮闘します。</p>
</section>
<section class="chapter">
<h2>第三章</h2>
<p>第三章は、クライマックスです。</p>
<p>物語は予想をしない展開を迎えます。</p>
</section>
<section class="appendix">
<h2>付録 A: 実例の紹介</h2>
<p>こちらはデモンストレーションです.</p>
</section>
<section class="appendix">
<h2>付録 B: あとがき</h2>
<p>こちらは結びの言葉です。</p>
</section>簡単に内容を紹介します。
AZ出版社 発行
第一章は、物語の始まりです。
彼はある町に生まれ、成長していきます。
第二章は、彼に試練が訪れます。
試練を克服するため、彼は奮闘します。
第三章は、クライマックスです。
物語は予想をしない展開を迎えます。
こちらはデモンストレーションです.
こちらは結びの言葉です。