<section>要素(一般的なセクション)。

<section>要素は HTML 5 で導入されたものです。
HTML 4/XHTML 1には該当する要素はありません。

HTML 5 に於ける、一般的なセクションである<section>要素について解説します。

<section>要素の概要。

HTML 5 に於ける<section>要素は、一般的なセクションとして定義されております。

HTML 4/XHTML 1には該当する要素はありません。

セクショニング内容要素には、他にも幾つかありますが、他のいずれにも該当しないセクションを<section>要素とするものとしております。

<section>要素の定義。

カテゴリ

要素が置ける箇所

フロウ内容要素が置ける箇所。

要素の内容モデル

フロウ内容要素

要素で定義された属性

グローバル属性のみ定義されております。

<section>要素の詳細。

HTML 5 に於ける<section>要素は、一般的なセクションです。

通常、<section>要素の内容には見出しを伴い、その見出しの掛かる範囲をマークアップしております。

内容モデルでは見出しの存在を必須としておりませんが、その一方でセクションと見出しの関係に言及しているので、特別な定義を持たない<section>要素の場合は必ず見出しを入れるようにすると良いでしょう。

<section>要素の例。

<body>
    <article>
        <h1>堀北真希ちゃんについて</h1>
        …
        <section>
            <h2>堀北真希ちゃんの概要</h2>
            …
            </section>

        <section>
            <h2>堀北真希ちゃんの活動</h2>
            <section>
                <h3>平成19年まで</h3>
                …
                </section>
            …
            <section>
                <h3>平成23年</h3>
                …
                </section>
            </section>
       …
       </article>
   </body>

注意事項。

<section>要素と見出しの等級について。

この節には、制作者の私見が入ります。

HTML 5 の仕様では、各セクションに掛かる見出しについて、

全てのセクションを階層に関らず第一等級に統一する
階層に併せて最上位から第一等級, 第二等級, …と言うように等級付けする

のいずれかを採るよう推奨しておりますが、制作者は後者の方法を強く推奨します。

理由は、HTML 5 より前の世代のユーザエージェントでは、セクショニング内容要素のタグを認識出来ず、前者の方法だと第一等級見出しばかりと誤認してしまう恐れがあるからです。

<section>要素と<div>要素の違い。

<section>要素は、一般的なブロックをグルーピングしたコンテナ要素ではありません。

あくまでも、セクション分けのためにのみ用いられるべき要素です。

ですから、例えば、

段落をひとまとめにして一括してスタイルを与えたい
外国語で書かれた段落をひとまとめにしたい

と言うように、セクションとは無関係にブロックをグループ化したいのであれば、<section>要素ではなく<div>要素としてマークアップすべきでしょう。

<section>要素の内容のマークアップについて。

この節には、制作者の私見が入ります。

<section>要素のマークアップとしては、フロウ内容要素であれば良い事になっております。

HTML 5 では、かつてインライン要素と呼ばれたテキストレヴェルの要素はフロウ内容要素の一種であるフレージング内容要素としているため、<section>要素直下に生テキストなどを直接書いても問題はない事になります。

ただ、HTML 5 より前の世代のユーザエージェントの場合、<section>要素をブロックとして認識出来ないため、おかしな結果になる事も予想出来ます。

このため、<section>要素の内容は出来る限り従来のブロックレヴェル要素、すなわち、

などにする事を強くお勧めします。

HTML 4/XHTML 1との違い。

<section>要素は HTML 4/XHTML 1にはありません。

関連項目。