2025年1月30日 / 最終更新日時 : 2025年2月10日 weeds お役立ち

sectionタグ -コンテンツをセクションとして構造化する｜HTML辞典

<section>タグとは？

<section>タグは、HTML文書内で関連するコンテンツをまとめ、セクション（区分）として構造化するためのタグです。
見出し（<h1>～<h6>）と共に使用され、コンテンツのまとまりを明確にするのが推奨されます。

基本情報

コンテンツモデル

フローコンテンツ（Flow Content）、セクショニングコンテンツ（Sectioning Content）
ブロックレベルの要素として扱われ、特定の意味を持つコンテンツのグループ化に使用されます。

閉じタグの有無

<section>は開始タグ（<section>）と閉じタグ（</section>）の両方が必要です。

基本的な記述方法

<section> を使用すると、コンテンツの意味的なまとまりを作成できます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sectionタグの例</title>
</head>
<body>
    <section>
        <h2>最新ニュース</h2>
        <p>ここにニュースの内容を記述します。</p>
    </section>

    <section>
        <h2>人気の記事</h2>
        <p>このセクションでは、人気の記事を紹介します。</p>
    </section>
</body>
</html>

ポイント：

  • <section> は意味を持つコンテンツのまとまりを作るために使用する。
  • 見出し（<h2> など）とセットで使うのが望ましい。
  • 単なるレイアウト目的ではなく、論理的な区切りとして活用する。

使用できる主な属性

<section>タグには特別な属性はありませんが、一般的なHTML要素の属性を使用できます。

属性名説明例
classCSSのクラスを適用<section class="news">...</section>
id一意の識別子を設定<section id="featured">...</section>
styleインラインスタイルを適用<section style="background-color: lightgray;">...</section>

CSSを使ったデザイン変更

<section> を適切にスタイル付けすることで、見た目を調整できます。

✅ カスタムスタイルの適用

section {
    padding: 20px;
    margin: 20px 0;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    border-radius: 5px;
}
<section>
    <h2>お知らせ</h2>
    <p>このボックスはCSSでスタイリングされています。</p>
</section>

<section> の適切な使用例

✅ ウェブサイトのコンテンツのまとまりを整理

記事や情報を分類する際に適しています。

<section>
    <h2>会社概要</h2>
    <p>私たちは〇〇業界で〇〇を提供しています。</p>
</section>
<section>
    <h2>お問い合わせ</h2>
    <p>メールや電話でのお問い合わせはこちら。</p>
</section>

✅ ブログやニュース記事のセクション分け

ブログやニュース記事の構成にも適しています。

<article>
    <h1>旅行の準備チェックリスト</h1>
    <section>
        <h2>パスポートとビザ</h2>
        <p>海外旅行の前に必ず確認してください。</p>
    </section>
    <section>
        <h2>荷造りのポイント</h2>
        <p>必要な持ち物をリストアップしましょう。</p>
    </section>
</article>

<section> の適切でない使用例（誤った使い方）

❌ 単なるレイアウト目的で使うのはNG

デザインや配置のために<section>を使うのは適切ではありません。

<!-- NG：レイアウト目的で <section> を使用 -->
<section class="container">
    <div class="content">コンテンツ</div>
</section>

✅ 正しい書き方（<div> を使用）

<div class="container">
    <div class="content">コンテンツ</div>
</div>

❌ 見出しなしで使うのはNG

見出しがないと、<section> の意味が不明瞭になります。

<!-- NG：見出しなしで <section> を使用 -->
<section>
    <p>このテキストは何のセクションなのか不明確。</p>
</section>

✅ 正しい書き方（見出しを追加）

<section>
    <h2>注意事項</h2>
    <p>ここに注意事項を記載します。</p>
</section>

<section> と他のタグの違い

タグ役割特徴適切な用途
<section>意味のあるコンテンツのまとまり見出しとセットで使用記事の区分、ニュース、ブログ
<div>汎用的なグループ化意味を持たないレイアウトの管理、CSS適用
<article>独立したコンテンツ記事やブログの内容を囲むニュース記事、ブログ、レビュー
<aside>補足情報の表示メインコンテンツとは別の情報サイドバー、広告、補足情報

使用上の注意点

✅ 意味のあるコンテンツのまとまりにのみ使用する

  • 単なるレイアウトではなく、論理的な区切りとして活用する。

✅ 必ず見出し（<h2> など）とセットで使う

  • 見出しがないと、セクションの目的が不明瞭になりやすい。

関連タグ

  • <article> – 独立した記事やニュースなど
  • <div> – ブロック要素のグループ化（レイアウト管理）
  • <header> – セクションの見出しやヘッダー部分
  • <footer> – セクションやページ全体のフッター部分
  • <aside> – 補足情報の表示

まとめ

<section>タグは、HTML文書内で意味のあるコンテンツのまとまりを作るためのタグ です。
見出し（<h2> など）とセットで使用し、論理的な区分を明確にするのが望ましいです。
単なるレイアウトには使用せず、適切に他のタグ（<div> や <article>）と使い分けることが推奨されます。

カテゴリー
お役立ち
お役立ち

前の記事

spanタグ インライン要素をグループ化する｜HTML辞典
2025年1月30日
お役立ち

次の記事

articleタグ -独立したコンテンツのまとまりを示す｜HTML辞典
2025年1月30日