【HTML】レッスン1-07：セクションタグとメタタグを知ろう

一つ前の章ではフォームの作成について学習しました。

今回はセクションタグとメタタグについて見ていきましょう。

Lesson1-0：HTML/CSSの開発環境を無料で整備しよう
Lesson1-1：HTML学習の入り口｜Webページの基本構造を理解しよう
Lesson1-2：基本的なHTMLタグを理解しよう
Lesson1-3：Webページにリンクや画像を挿入しよう
Lesson1-4：３種類のリストを理解しよう
Lesson1-5：テーブル（表）の基礎を理解しよう
Lesson1-6：フォームを作成しよう
Lesson1-7：セクションタグとメタタグを知ろう◁今回はココ

HTMLを使ったウェブページの作成では、ページの構造をしっかりと設計することが重要です。

そこで役立つのがHTMLのセクションタグとメタタグです。

セクションタグはページを論理的に分割し、読みやすく整理するための役割を持ちます。一方でメタタグはページ全体の情報を補足するための重要な要素であり、検索エンジンの最適化（SEO）や表示方法の制御に役立ちます。

本記事ではこれらのタグの基本や使用例を学びながら、ウェブページをより効果的に設計する方法を身につけましょう。

また今後CSSを学んだ際にどのように役立つかについても軽く触れていきます。

<<前のページ HTML/CSSの記事一覧 次のページ>>

セクションタグとは？

HTMLのセクションタグはウェブページのコンテンツを意味的に分割するために使用される重要な要素です。

これらのタグを使うことで、単にデザイン上の区切りを作るだけでなく、コンテンツの論理的な区分を明確に示すことができます。

例えばニュース記事のページを考えてみましょう。このページにはヘッダー部分、記事の本文、サイドバー、フッターなどがあります。それぞれが異なる役割を持つため、これらを分割することで内容を整理できます。

このようにセクションタグを使用することで、コードが視覚的にも意味的にも整理され、後でデザインや機能を追加しやすくなります。

さらに検索エンジンやスクリーンリーダーがコンテンツを正しく理解しやすくなり、SEO対策やアクセシビリティの向上にもつながります。

セクションタグは構造の整理に使うだけでなく、CSSを使ってそれぞれの部分に異なるデザインを適用する際にも役立ちます。

例えばヘッダーやフッターに異なる背景色やフォントを設定することで、ページ全体の見栄えを整えることができます。

主要なセクションタグの紹介

HTMLにはさまざまなセクションタグが用意されています。

それぞれが特定の役割を持ち、ページの構造を分かりやすく整理するために使用されます。

ここでは代表的なセクションタグとその役割について説明します。

<header>タグ

<header>タグはページやセクションの冒頭部分に使用されるタグです。

通常、ロゴ、タイトル、ナビゲーションメニューなどが含まれる部分を定義します。ページ全体のヘッダーだけでなく、各セクション内のヘッダーとしても使用可能です。

<header>
  <h1>ウェブサイトのタイトル</h1>
  <nav>
    <ul>
      <li><a href="#home">ホーム</a></li>
      <li><a href="#about">概要</a></li>
      <li><a href="#contact">お問い合わせ</a></li>
    </ul>
  </nav>
</header>

このサイトのヘッダー部分には「初心者のためのプログラミングテキスト＆問題集」というサイトタイトルと各言語へリンクするメニューを表示していますので確認してみて下さい。

なお、コード中の<nav>タグはメニューを作るためのタグであり、このあと紹介します。

<footer>タグ

<footer>タグはページやセクションの末尾部分に使用されるタグです。通常、著作権情報や関連リンク、コンタクト情報などが含まれます。

<footer>
  <p>&copy; 2025 MyWebsite. All rights reserved.</p>
</footer>

このサイトのフッター部分には今見ている記事の階層を表す「パンくずリスト」というリンクと、サイトの正当性・透明性を表すためのプライバシーポリシーや免責事項へのリンクを貼っています。

<main>タグ

<main>タグは、ページ内の主要なコンテンツを示します。

通常1ページにつき1つの<main>タグを使用します。

<main>
  <h2>主要コンテンツ</h2>
  <p>ここに重要な情報が表示されます。</p>
</main>

<main>タグの使いどころ

<main>はページの主要なコンテンツを示します。

ウェブページ全体の中で訪問者が最も注目する部分を定義するためのタグです。通常、1ページにつき1つの<main>タグだけを使用します。

  1. 適切な例:
    • ページの主なコンテンツ部分全体
    • 記事の本文、ギャラリー、主要な情報など
  2. 不適切な例:
    • ナビゲーションやサイドバー（それらは<nav>や<aside>）

<article>タグ

<article>タグは独立したコンテンツの単位を表します。

ニュース記事やブログ投稿など、自立して意味が通じるコンテンツを定義する際に使われます。

<article>
  <h2>最新ニュース</h2>
  <p>HTMLの最新バージョンがリリースされました。</p>
</article>

<article>タグの使いどころ

<article>は独立した意味を持つコンテンツを定義する際に使用します。

たとえばブログの投稿、ニュース記事、製品レビューなどがこれに該当します。ポイントは、「その部分だけを別の場所で表示しても意味が通じるかどうか」です。

  1. 適切な例:
    • ブログ記事全体
    • ニュースの個別記事
    • 製品ページの説明文
  2. 不適切な例:
    • セクションごとの小見出しや段落（それらは<section>の役割）

<section>タグ

<section>タグはページ内のコンテンツを論理的に分割するためのタグです。

各セクションは、あるトピックや目的に関連するコンテンツをグループ化します。

<section>
  <h2>サービス内容</h2>
  <p>私たちはウェブ開発を専門としています。</p>
</section>

<section>タグの使いどころ

<section>は関連するコンテンツをグループ化するためのタグです。

それ自体が独立した意味を持つわけではなく、ページ全体の構造を論理的に整理するために使います。

例えば記事ページの「概要」「詳細情報」「顧客レビュー」のように、トピックごとに区切る場合に便利です。

  1. 適切な例:
    • トピックごとに内容を分ける際
    • 各セクションに小見出しを付ける場合
  2. 不適切な例:
    • 独立した記事や自立したコンテンツ（それは<article>の役割）

<section>タグと<article>タグの入れ子関係（どちらの中にどちらを入れるか）は、明確な正解はありません。

本サイトでは<article>タグの中に<section>タグを入れることを推奨していますが、厳密にするならそのタグでまとめる内容に合わせて選択しましょう。

・ページの構造を意味的に分ける ⇒ <section>タグ
・個別に完結する内容を示す ⇒ <article>タグ

<aside>タグ

<aside>タグはそのページのメインではない、補足的な情報を表示するた「めに使用されます。

広告や関連記事、プロフィールなどに利用されます。

<aside>
  <h3>関連記事</h3>
  <ul>
    <li><a href="#topic1">トピック1</a></li>
    <li><a href="#topic2">トピック2</a></li>
  </ul>
</aside>

このサイトでは、CSSを用いて<aside>タグの中身をサイドバーに表示しています。

<nav>タグ

<nav>タグはナビゲーションメニューを定義するためのタグです。

ページ内リンクや外部リンクを整理して配置します。

<nav>
  <ul>
    <li><a href="#about">概要</a></li>
    <li><a href="#services">サービス</a></li>
    <li><a href="#contact">お問い合わせ</a></li>
  </ul>
</nav>

セクションタグの使用例

セクションタグを効果的に使うと、ウェブページを論理的かつ見やすく構造化することができます。

この章では具体的なHTMLコードを用いてセクションタグの使い方を解説します。

基本的なセクションタグの組み合わせ

以下は典型的なウェブページの構造をセクションタグを使って記述した例です。

この例では<header>、<nav>、<main>、<article>、<aside>、<footer>を使用しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>セクションタグの使用例</title>
</head>
<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>
    <!-- 記事1 -->
    <article>
      <h2>最新ニュース</h2>
      <p>HTMLの新しいバージョンが公開されました。</p>
    </article>

    <!-- 記事2 -->
    <article>
      <h2>イベント情報</h2>
      <p>次回のウェブ開発イベントは2025年3月に開催されます。</p>
    </article>
  </main>

  <!-- 補足情報 -->
  <aside>
    <h3>関連リンク</h3>
    <ul>
      <li><a href="#news">ニュースセクション</a></li>
      <li><a href="#events">イベントセクション</a></li>
    </ul>
  </aside>

  <!-- ページのフッター -->
  <footer>
    <p>&copy; 2025 My Website. All rights reserved.</p>
  </footer>
</body>
</html>

コードの解説

上記のコードをVSCを使ってブラウザに表示した上で、下記の解説と見比べてみてください。

  1. <header>と<nav>
    • <header>にはウェブサイトのタイトルとナビゲーションメニューが含まれています。
    • <nav>内ではリスト形式でリンクを配置し、訪問者がページ内を移動できるようにしています。
  2. <main>と<article>
    • <main>はウェブページの主要なコンテンツを包み込む役割を果たします。
    • その中に独立した2つの<article>があり、それぞれの記事が独立した意味を持つように設計されています。
    • <article>タグの中身をさらに<h3>タグなどで分割する際には<section>タグを使いましょう。
  3. <aside>
    • サイドバーとして関連リンクを表示しています。この部分は補足的な情報を提供するのに適しています。
  4. <footer>
    • ページの末尾には著作権情報を記載しています。

CSSでさらに見やすく

この例のコードは基本的な構造を示したものです。

実際に使う場合はCSSを使ってデザインを追加することでページ全体の見た目を整え、セクションごとの区切りを視覚的に強調できます。

メタタグとは？

HTMLのメタタグはウェブページに関する追加情報を記述するために使用される重要な要素であり、body部分ではなくhead部分に記載します。

これらの情報はページを訪れるユーザーからは見えませんが、検索エンジンやブラウザにとって役立つ情報を提供します。

以下では、メタタグの基本的な役割と使用例について解説します。

メタタグの役割

メタタグはウェブページの「メタ情報（データに関するデータ）」を指定します。

この情報には、以下のようなものが含まれます。

  • 検索エンジンのための情報（SEO）: ページのタイトルや説明文を検索エンジンに伝えることで、検索結果の表示を最適化します。
  • 文字エンコーディングの設定: ページがどの文字セットを使用しているかを指定します。
  • ビューポート設定: モバイルデバイスでの表示を調整します。

基本的なメタタグの例

以下はよく使用されるメタタグの例です。

1. 文字エンコーディングの指定

ページが正しく表示されるように文字コードを指定します。通常、UTF-8が使用されます。

<meta charset="UTF-8">

2. メタディスクリプション（ページの説明）

検索エンジンでページがどのように表示されるかを設定します。

何かを検索したときに、各サイトの名称の下にそのサイト説明が表示されますが、その内容がこのメタディスクリプションに書かれた内容になります。

<meta name="description" content="HTMLのメタタグについて学びましょう。">

3. メタキーワード（キーワードの設定）

検索エンジン向けにページに関連するキーワードを指定します。 ※近年の検索エンジンでは、キーワードの指定はあまり重要視されなくなっています。

<meta name="keywords" content="HTML, メタタグ, ウェブデザイン">

昔のインターネットでは検索エンジンへアピールするために、少しでも関係ありそうな単語は数十個も無意味に羅列したサイトが沢山ありましたね…

4. ビューポートの設定

モバイルデバイスでのページ表示を最適化します。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

5. 著者情報

ページの作成者を指定します。

<meta name="author" content="Your Name">

メタタグの使用例

以下は複数のメタタグを含むHTMLの例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="HTMLのメタタグの基本を解説しています。">
  <meta name="keywords" content="HTML, メタタグ, 初心者向け">
  <meta name="author" content="ウェブデザインチーム">
  <title>メタタグの基本</title>
</head>
<body>
  <header>
    <h1>メタタグの基本</h1>
  </header>
  <main>
    <p>メタタグはウェブページの補足情報を提供します。</p>
  </main>
  <footer>
    <p>&copy; 2025 Web Design Team</p>
  </footer>
</body>
</html>

メタタグは目に見えない部分でウェブページを支える重要な要素です。

これを適切に使用することで、検索エンジンへの対応やページのパフォーマンスが向上します。

セクションタグとメタタグの関係

セクションタグとメタタグはそれぞれ異なる目的を持つHTML要素ですが、両者を効果的に活用することで、ウェブページの構造をより明確にし、利便性を向上させることができます。

この章ではセクションタグとメタタグがどのように連携し、ウェブページ全体に影響を与えるのかを解説します。

２つのタグの役割の違い

  1. セクションタグ
    • body部分に書くことでページ内のコンテンツを意味的に分割し、読みやすさや構造を向上させる。
    • 主にユーザーに直接表示される内容の整理に役立つ。
    • 例: <header>, <main>, <article>, <section>, <aside>, <footer>。
  2. メタタグ
    • head部分に書くことでページ自体に関する追加情報（メタデータ）を提供する。
    • ユーザーに直接表示されることは少ないが、検索エンジンやブラウザに重要な情報を伝える役割を果たす。
    • 例: <meta charset="UTF-8">, <meta name="description" content="ウェブページの説明">。

セクションタグとメタタグはそれぞれ異なる役割を果たしながら、ウェブページの品質向上に貢献します。

セクションタグでページの論理構造を整理し、メタタグで補足情報を適切に設定することでSEOやモバイル対応、ユーザー体験が向上します。

どちらも基本的な要素であり、初心者にとっても重要なスキルとなるでしょう。

まとめ

これまでの「HTMLの基本」シリーズを通じて、ウェブページ作成に必要な基本要素を学んできました。

HTMLはウェブの土台を形作る非常に強力なツールです。このシリーズで学んだ内容を活かして実際に自分のウェブページを作成してみることで、さらに理解が深まるでしょう。

ここまで学習を進めてきた皆さん、お疲れさまでした！

HTMLの基礎をしっかり身につけた今、次のステップとして「CSSの基本」に進む準備が整いました。CSSを使うことで学んだHTMLにデザインを加え、より魅力的で視覚的に優れたウェブページを作れるようになります。

ここからウェブデザインの世界が一気に広がります。

新たなチャレンジが皆さんを待っていますので、ぜひ楽しんで取り組んでください！

練習問題1-7：セクションタグを使いこなそう

VSCで「Lesson1-7.html」というファイルを作って保存してください。

そのファイルにhtmlコードを書き、ブラウザに以下のように表示させましょう。また、画像内の文言に従って正しくタグを配置してください。

初めてのWebサイトを作ろう1-7

このサイトのLesson1-1からLesson3-9まで順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。

サイトのタイトルは「HTML/CSSの情報まとめ」

この「初心者のためのプログラミングテキスト＆問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。

Lesson1-7の学習内容をまとめよう

VSCを使ってlesson1フォルダの中に「MyWebsite1-7.html」というファイルを作ってください。

その後、MyWebsite1-7.htmlにこのLesson1-7で学習した内容をまとめてみましょう。

自分で記事を見直してまとめることを推奨しますが、模範解答も用意しましたので必要な方はこちらを活用して下さい。

模範解答（ブラウザ表示）

Lesson1-7：セクションタグとメタタグ（h1タグ）

ヘッダーにはページタイトルやメニューを表示する

＊＊＊ ここまでがヘッダー ＊＊＊

セクションタグ（h2タグ）

セクションタグは文書の意味的な区分を示すタグ

  • <header>：ヘッダー部分（タイトルやナビゲーションリンク）
  • <footer>：フッター部分（著作権や連絡先）
  • <main>：文書の主要な内容
  • <article>：独立したコンテンツ（ブログ記事など）
  • <section>：内容をまとめるセクション
  • <aside>：補足的な情報（広告、リンクなど）
  • <nav>：ナビゲーションメニュー

メタタグ（h2タグ）

メタタグは文書のメタデータを指定するタグ。

  • <meta charset=”UTF-8″>：文字エンコーディングを指定
  • <meta name=”description” content=”ページの説明”>：検索エンジン向け説明文
  • <meta name=”keywords” content=”HTML, CSS”>：キーワード指定
  • <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>：レスポンシブ対応

注意点（h2タグ）

  • 適切なセクションタグを使用し、文書の意味を明確にする。
  • メタタグは検索エンジン最適化（SEO）やデバイス対応に重要。
  • viewportタグを指定しないと、スマートフォンでの表示が最適化されない。
  • セクションタグの使いすぎに注意し、適切にコンテンツを整理する。

トップページへ戻る

＊＊＊ ここからフッター ＊＊＊

フッターには著作権情報などのリンクを表示する

模範解答（htmlコード）
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Lesson1-7：セクションタグとメタタグ</title>
</head>
<body>
    <header>
        <h1>Lesson1-7：セクションタグとメタタグ</h1>
        <nav>
            <ul>
              <li><a href="MyWebSite.html">ホーム</a></li>
              <li><a href="lesson1/profile.html">プロフィール</a></li>
            </ul>
        </nav>
        <p>ヘッダーにはページタイトルやメニューを表示する</p>
        <p>＊＊＊ ここまでがヘッダー ＊＊＊</p>
    </header>
    <img src="../image/Lesson1-7 セクションタグとメタタグを知ろう.jpg" alt="Lesson1-7 セクションタグとメタタグを知ろう">

    <h2>セクションタグ</h2>
    <p>セクションタグは文書の意味的な区分を示すタグ</p>
    <ul>
        <li>&lt;header>：ヘッダー部分（タイトルやナビゲーションリンク）</li>
        <li>&lt;footer>：フッター部分（著作権や連絡先）</li>
        <li>&lt;main>：文書の主要な内容</li>
        <li>&lt;article>：独立したコンテンツ（ブログ記事など）</li>
        <li>&lt;section>：内容をまとめるセクション</li>
        <li>&lt;aside>：補足的な情報（広告、リンクなど）</li>
        <li>&lt;nav>：ナビゲーションメニュー</li>
    </ul>

    <h2>メタタグ</h2>
    <p>メタタグは文書のメタデータを指定するタグ。</p>
    <ul>
        <li>&lt;meta charset="UTF-8">：文字エンコーディングを指定</li>
        <li>&lt;meta name="description" content="ページの説明">：検索エンジン向け説明文</li>
        <li>&lt;meta name="keywords" content="HTML, CSS">：キーワード指定</li>
        <li>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0">：レスポンシブ対応</li>
    </ul>

    <h2>注意点</h2>
    <ul>
        <li>適切なセクションタグを使用し、文書の意味を明確にする。</li>
        <li>メタタグは検索エンジン最適化（SEO）やデバイス対応に重要。</li>
        <li>viewportタグを指定しないと、スマートフォンでの表示が最適化されない。</li>
        <li>セクションタグの使いすぎに注意し、適切にコンテンツを整理する。</li>
    </ul>

    <p>トップページへ<a href="../MyWebSite.html">戻る</a></p>
    <footer>
        <p>＊＊＊ ここからフッター ＊＊＊</p>
        <p>フッターには著作権情報などのリンクを表示する</p>
    </footer>
</body>
</html>

このコードをコピーしてMyWebsite1-7.htmlに張り付けてください。

<<前のページ HTML/CSSの記事一覧 次のページ>>

この記事への質問・コメント

この記事を作成するにあたりAIの力を借りています。

問題ないことは確認していますが、もし間違いや表現の違和感などありましたら、ご指摘頂けると大変助かります。






    HTML/CSSのテキスト＆問題集トップへ戻る
    トップページへ戻る