一般的なセクションの範囲を示す

08/04/2018

HTML入門

一般的なセクションの範囲を示す要素

/*一般的なセクションの範囲を示す記述*/
<section>ここに一般的なセクションが入る</section>

section要素は、全体の一部分となっているセクションを表します。これに対して、内容全体を含むセクションにはarticle要素を使います。

HTML5ではセクションを表す要素が全部で4種類ありますが、用途の限定されている他の3種類に該当しないセクションに対しては、このsection要素を使います。

セクションを表す要素

セクションについてはすでに別記事に解説があるので再確認になります。

HTML5におけるセクションは、書籍での「章」や「節」のようなものでした。このセクションを表す4つの要素は、7種類のカテゴリーの中のセクショニングコンテンツに該当する要素です。

  • メタデータコンテンツ(Metadata content)
  • フローコンテンツ(Flow content)
  • セクショニングコンテンツ(Sectioning content)
  • ヘディングコンテンツ(Heading content)
  • フレージングコンテンツ(Phrasing content)
  • エンベディッドコンテンツ(Embedded content)
  • インタラクティブコンテンツ(Interactive content)

セクショニングコンテンツに該当し、セクションを表す要素は以下の4つです。

セクションを表す4つの要素

article要素・section要素・aside要素・nav要素

この4つの要素のうち、article要素・aside要素・nav要素は用途が限定されています。この3種類に該当しないセクションに対して、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要素を使った例
メモ

section要素を使っているかどうかは、article要素と同じようにブラウザの表示だけでは分かりません。article要素やsection要素は、HTMLの文書構造をはっきりさせるための要素です。

Posted by kiri