一般的なセクションの範囲を示す
一般的なセクションの範囲を示す要素
/*一般的なセクションの範囲を示す記述*/
<section>ここに一般的なセクションが入る</section>section要素は、全体の一部分となっているセクションを表します。これに対して、内容全体を含むセクションにはarticle要素を使います。
https://www.hibikore-tanren.com/intro/html-article/HTML5ではセクションを表す要素が全部で４種類ありますが、用途の限定されている他の３種類に該当しないセクションに対しては、このsection要素を使います。
セクションを表す要素
セクションについてはすでに別記事に解説があるので再確認になります。
HTML5におけるセクションは、書籍での「章」や「節」のようなものでした。このセクションを表す４つの要素は、７種類のカテゴリーの中のセクショニングコンテンツに該当する要素です。
７種類のカテゴリー
- メタデータコンテンツ(Metadata content)
- フローコンテンツ（Flow content）
- セクショニングコンテンツ（Sectioning content）
- ヘディングコンテンツ（Heading content）
- フレージングコンテンツ（Phrasing content）
- エンベディッドコンテンツ（Embedded content）
- インタラクティブコンテンツ（Interactive content）
https://www.hibikore-tanren.com/intro/html-elements/
https://www.hibikore-tanren.com/intro/html-heading/セクショニングコンテンツに該当し、セクションを表す要素は以下の４つです。
セクションを表す４つの要素
- article要素
- section要素
- aside要素
- nav要素
この４つの要素のうち、article要素・aside要素・nav要素は用途が限定されています。この３種類に該当しないセクションに対して、section要素を使います。
| 要素名 | 用途 |
|---|---|
| article | 要素記事全体の範囲を示す |
| aside | 要素本題から外れた内容のセクションを示す |
| nav要素 | ナビゲーションの範囲を示す |
一般的なセクションの範囲を示した例
section要素を使って一般的なセクションの範囲を示した例です。section要素の間に記事の内容全体ではなく、一部が入っていることが分かります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>一般的なセクションの範囲を示した例</title>
</head>
<body>
<article>
<h1>セクションの範囲を示す</h1>
<p>セクションの範囲を示すには、いくつかの方法があります。</p>
<section>
<h2>article要素を使う</h2>
<p>article要素は、記事の内容全体が入っているセクションを示すときに使われます。</p>
</section>
<section>
<h2>section要素を使う</h2>
<p>section要素は、全体の一部分になっているセクションを示すときに使われます。</p>
</section>
</article>
</body>
</html>一般的なセクションの範囲を示すsection要素を記述した文書をブラウザで表示させた例です。
メモ
section要素を使っているかどうかは、article要素と同じようにブラウザの表示だけでは分かりません。article要素やsection要素は、HTMLの文書構造をはっきりさせるための要素です。
Recommended books
