Zenn
📝

HTML 講座２ セクショニング・コンテンツ

2025/03/23に公開
HTML
tech

こんにちは！前回の記事では、HTMLの基本的な書き方について紹介しました。

今回は、HTMLでWebページを わかりやすく整理するために使われる「セクショニング・コンテンツ」 について解説します！

HTML 講座２ セクショニング・コンテンツ

セクショニング・コンテンツとは？

セクショニング・コンテンツとは、HTMLの中で「ここからここまでが1つのまとまりですよ」と示すためのタグのことです。

簡単にいうと、Webページを意味ごとに分けるためのブロックです。

なぜセクショニングが必要なのでしょうか？

Webページには「ヘッダー」や「記事などのメインコンテンツ」、「フッター」などいろいろなパーツがあります。こうしたパーツを、明確に分けてあげないと、ブラウザや検索エンジンには 「この部分が何の意味なのか」 が伝わりません。そこで、「ここは記事だよ」「ここはヘッダーだよ」 と意味を明確に伝えるために、セクショニング・コンテンツを使います。

以下が主なセクショニング・コンテンツです。
これから１つ１つ紹介していきますね！

タグ名 役割 よく使う場面の例
<section> 意味のあるまとまりを作る お知らせ、プロフィール、機能紹介など
<article> 独立した内容を表す ブログ記事、ニュース記事、投稿など
<nav> ナビゲーションのリンク集 ヘッダーメニュー、サイドメニューなど
<aside> 補足的な情報を表す サイドバー、関連リンク、広告など
<header> セクションやページの先頭部分 タイトル、ロゴ、ナビゲーションなど
<footer> セクションやページの締め部分 コピーライト、連絡先、SNSリンクなど
<main> ページの中心となる主要部分 記事本文、メインコンテンツなど

sectionタグ：意味のある「まとまり」を表す

📌 使いどころ
「お知らせ」「プロフィール」「特徴紹介」など、1つのテーマを持つまとまり。

📖 説明
「この部分は特定のテーマでまとめられていますよ」と示すときに使います。
中に <h2> などの見出しを含めるのが基本です。

※<h2>は見出しを意味するタグです。また、別講座で解説しますね。

💡 例：

<section>
  <h2>サービスの特徴</h2>
  <p>私たちのサービスは、初心者にも優しく使えます。</p>
</section>

articleタグ：独立した記事や投稿を表す

📌 使いどころ
ブログ記事、レビュー、ニュース記事、SNS投稿など。

📖 説明
「それ単体で意味が通じるコンテンツ」に使います。
記事一覧などの中に複数の <article> が並ぶこともあります。

💡 例：

<article>
  <h2>今日の出来事</h2>
  <p>今日は天気がよく、散歩に出かけました。</p>
</article>

📌 使いどころ
メニュー、ヘッダーやフッター内のリンク集など。

📖 説明
ページ内や他のページへのリンクをまとめるときに使います。
ユーザーが「移動」するための部分です。

※<ul>や<li>はリンクを意味するタグです。また、別講座で解説しますね。

💡 例：

<nav>
  <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">記事一覧</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

asideタグ：補足情報・サイドバー

📌 使いどころ
関連リンク、広告、著者プロフィールなど。

📖 説明
メインコンテンツとは直接関係しない、補足的な内容を表示するときに使います。

※<ul>や<li>はリンクを意味するタグです。また、別講座で解説しますね。

💡 例：

<aside>
  <h3>おすすめ記事</h3>
  <ul>
    <li><a href="#">HTMLとは？</a></li>
    <li><a href="#">CSSの基本</a></li>
  </ul>
</aside>

headerタグ：セクションやページの先頭部分

📌 使いどころ
サイトのロゴやタイトル、ナビゲーションがある部分。

📖 説明
ページ全体や各セクションの「始まり」を表します。見出しタグ（<h1>など）や<nav>を含むことが多いです。

💡 例：

<header>
  <h1>私のブログ</h1>
  <nav>...</nav>
</header>

footerタグ：セクションやページのしめくくり

📌 使いどころ
コピーライト、会社情報、SNSリンク、連絡先など。

📖 説明
そのページやセクションの「終わり」を表します。記事の下やページの一番下によくあります。

💡 例：

<footer>
  <p>&copy; 2025 My Blog</p>
</footer>

mainタグ：ページの「主役」となる部分（※1ページに1つだけ）

📌 使いどころ
記事の本文、サービスの説明など。

📖 説明
そのページの最も重要なコンテンツを囲むタグです。<main> は1ページに1回だけ使えます。

💡 例：

<main>
  <h2>ようこそ</h2>
  <p>このページはHTMLの基本を紹介しています。</p>
</main>

まとめ

今回は、セクショニング・コンテンツについて学びました。

セクショニング・コンテンツを上手に使うことで、HTMLが見やすく・正確に伝わるようになりますので、ぜひ活用していただければと思います！

それではまた次回。

Discussion