HTML

The section element is a block-level element used in HTML to group related content.

section 要素

　section要素は、関連するコンテンツをグループ化するために使用されるブロックレベルの要素です。Webページの構造を明確にし、読みやすさを向上させるために役立ちます。section要素には、見出し要素（<h1>〜<h6>）が含まれることが一般的です。

　section要素は、以下のようなシチュエーションで使用されることがあります。

ブログ記事のセクションをグループ化する
トピックの異なるコンテンツをグループ化する
Webページ内の複数のセクションに分割する

　例えば、以下のように section要素を使用して、Webページの構造を明確にすることができます。


<body>
	<header>
		<h1>My Website</h1>
		<nav>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</nav>
	</header>
	<main>
		<section>
			<h2>About Us</h2>
			<p>Our company was founded in 2005...</p>
		</section>
		<section>
			<h2>Our Products</h2>
			<p>We offer a variety of products, including...</p>
		</section>
		<section>
			<h2>Contact Us</h2>
			<p>You can contact us at...</p>
		</section>
	</main>
	<footer>
		<p>&copy; 2023 My Website</p>
	</footer>
</body>

　上記の例では、section要素がそれぞれのトピックに応じてコンテンツをグループ化しています。また、section要素には見出し要素（<h2>）が含まれており、セクションの内容を表す簡潔なタイトルとなっています。

　section要素は、CSSを使用してスタイルを設定することができます。例えば、以下の CSSコードを使用して、section要素にグレーの背景色を設定することができます。


section {
	background-color: #ddd;
}

　section要素は、ページ内の論理的なセクションを定義するための役割を持っています。そのため、HTML5では、より具体的な目的を持つ article や aside などの要素が新たに追加されたため、適切に使用することが重要です。

section 要素の概要

カテゴリー

フロー・コンテンツ

セクショニング・コンテンツ

コンテンツ･モデル

フロー・コンテンツ

利用可能な場所

フロー・コンテンツが期待される場所

開始タグ

必須

終了タグ

必須

要素固有のコンテンツ属性

なし

標準的なスタイル

section {
	display: block;
}