一つ前の章ではフォームの作成について学習しました。
今回はセクションタグとメタタグについて見ていきましょう。
Lesson1：HTML入門編
・Lesson1-1：HTMLの概要と基本構造を理解しよう
・Lesson1-2：基本的なHTMLタグを理解しよう
・Lesson1-3：Webページにリンクや画像を挿入しよう
・Lesson1-4：３種類のリストを作成しよう
・Lesson1-5：テーブルを作成しよう
・Lesson1-6：フォームを作成しよう
・Lesson1-7：セクションタグとメタタグを知ろう ◁今回はここ
・Lesson1-☆1：HTMLの『属性』とは何か
・Lesson1-☆2：SEOに強いHTMLの書き方
・Lesson1-☆3：Emmetの使い方完全ガイド
Lesson2：CSS入門編
Lesson3：CSS応用編
HTMLを使ったウェブページの作成では、ページの構造をしっかりと設計することが重要です。
そこで役立つのがHTMLのセクションタグとメタタグです。
セクションタグはページを論理的に分割し、読みやすく整理するための役割を持ちます。一方でメタタグはページ全体の情報を補足するための重要な要素であり、検索エンジンの最適化（SEO）や表示方法の制御に役立ちます。
本記事ではこれらのタグの基本や使用例を学びながら、ウェブページをより効果的に設計する方法を身につけましょう。
<<前のページ
記事一覧
次のページ>>
HTMLのセクションタグとは？
HTML/CSSの用語集 も活用しながら、学習を進めましょう。
HTMLのセクションタグはウェブページ内のコンテンツを意味的に分割するために使用される重要な要素です。
これらのタグを使うことで、単にデザイン上の区切りを作るだけでなく、コンテンツの区分を明確に示すことができます。
例えばニュース記事のページを考えてみましょう。このページにはタイトルやメニューなどがあるヘッダー部分、記事の本文、サイドバー、フッターなどがあります。それぞれが異なる役割を持つため、これらをセクションタグで分割することで内容を整理できます。
このようにセクションタグによってコードが視覚的にも意味的に整理され、後でデザインや機能を追加しやすくなります。
さらに検索エンジンやスクリーンリーダーがコンテンツを正しく理解しやすくなり、SEO対策やアクセシビリティの向上にもつながります。
主要なHTMLセクションタグを徹底解説
HTML文書は最初にDOCTYPE宣言と<html>開始タグを書き、その後に<head>タグと<body>タグが続くとLesson1-1で学習しました。
セクションタグは<body>タグの中身をさらに分割するものです。
今あなたが見ているこのページを例にすると、冒頭の「Python関連学習館｜初心者がゼロから学べる総合教材」というサイトタイトルと、各言語へのリンクがあるヘッダー部分を定義する<header>タグ 。
記事本文を書く <main>タグ 。
そして末尾のパンくずリストや著作権情報などを書くフッター部分を定義する <footer>タグ などがあります。
それぞれが特定の役割を持ち、ページの構造を分かりやすく整理するために使用されます。
使用しなくてもWebページを表示すること自体はできますが、見やすいサイト作りや検索エンジン最適化（SEO）のためには必ず必要となるものです。
<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>このサイトのヘッダー部分には「Python関連学習館｜初心者がゼロから学べる総合教材」というサイトタイトルと、各言語へリンクするメニューを表示していますので確認してみて下さい。
なお、コード中の<nav>タグはメニュー（リンクリスト）を作るためのセクションタグであり、このあと紹介します。
<footer>タグでフッターを設定しよう
<footer>タグはページやセクションの末尾部分に使用されるタグです。通常、著作権情報や関連リンク、コンタクト情報などが含まれます。
<footer> <p>© 2025 MyWebsite. All rights reserved.</p> </footer>
このサイトのフッター部分には今見ている記事の階層を表す「パンくずリスト」というリンクと、サイトの正当性・透明性を表すためのプライバシーポリシーや免責事項へのリンクを貼っています。
<main>タグでページの主要部分を作成
<main>タグは、ページ内の主要なコンテンツを示します。
通常1ページにつき1つの<main>タグを使用します。
<header> <h1>ウェブサイトのタイトル</h1> </header> <main> <h2>メインコンテンツ</h2> <p>ここにこのページのメインコンテンツが表示されます。</p> </main> <footer> <p>© 2025 MyWebsite. All rights reserved.</p> </footer>
<article>タグで独立したコンテンツを作成
<article>タグは独立したコンテンツの単位を表します。
ニュース記事やブログ投稿など、自立して意味が通じるコンテンツを定義する際に使われます。
<main>
<article>
<h2>最新ニュース</h2>
<p>HTMLの最新バージョンがリリースされました。</p>
</article>
</main><article>タグの使いどころ
<article>は独立した意味を持つコンテンツを定義する際に使用します。
たとえばブログの投稿、ニュース記事、製品レビューなどがこれに該当します。ポイントは、「その部分だけを別の場所で表示しても意味が通じるかどうか」です。
- 適切な例:
- ブログ記事全体
- ニュースの個別記事
- 製品ページの説明文
- 不適切な例:
- セクションごとの小見出しや段落（それらは
<section>の役割）
- セクションごとの小見出しや段落（それらは
<section>タグでセクションを区切る方法
<section>タグはページ内のコンテンツを論理的に分割するためのタグです。
各セクションは、あるトピックや目的に関連するコンテンツをグループ化します。
<article>
<section>
<h2>サービス内容</h2>
<p>私たちはウェブ開発を専門としています。</p>
</section>
<section>
<h2>カスタマイズ対応の開発</h2>
<p>お客様のニーズに合った開発を行います。</p>
</section>
</article><section>タグの使いどころ
<section>は関連するコンテンツをグループ化するためのタグです。
それ自体が独立した意味を持つわけではなく、ページ全体の構造を論理的に整理するために使います。
例えば記事ページの「概要」「詳細情報」「顧客レビュー」のように、トピックごとに区切る場合に便利です。
- 適切な例:
- トピックごとに内容を分ける際
- 各セクションに小見出しを付ける場合
- 不適切な例:
- 独立した記事や自立したコンテンツ（それは
<article>の役割）
- 独立した記事や自立したコンテンツ（それは
<aside>タグを活用しよう
<aside>タグはそのページのメインではない、補足的な情報を表示するために使用されます。
広告や関連記事、プロフィールなどに利用されます。
<main>
<article>
<!-- メインコンテンツ -->
</article>
<aside>
<h2>補足情報</h2>
<p>補足情報の内容</p>
</aside>
</main>メインコンテンツに関係する補足情報なら<main>タグの中に、関係しない補足情報なら外に書きましょう。
このサイトでは、<main>タグの外に書いた<aside>タグの中身を、CSSを用いてサイドバーに表示しています。
<nav>タグでナビゲーションメニューを設置
<nav>タグはナビゲーションメニューを定義するためのタグです。
ページ内リンクや外部リンクを整理して配置します。
<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>
HTMLセクションタグの使用例
セクションタグを効果的に使うと、ウェブページを論理的かつ見やすく構造化することができます。
この章では具体的なHTMLコードを用いてセクションタグの使い方を解説します。
基本的な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>© 2025 My Website. All rights reserved.</p>
</footer>
</body>
</html>CSSでさらに見やすく
この例のコードは基本的な構造を示したものです。
実際に使う場合はCSSを使ってデザインを追加することでページ全体の見た目を整え、セクションごとの区切りを視覚的に強調できます。
メタタグとは？HTMLでのSEO設定の基本
HTMLのメタタグはウェブページに関する追加情報を記述するために使用される重要な要素であり、body部分ではなくhead部分に記載します。
これらの情報はページを訪れるユーザーからは見えませんが、検索エンジンやブラウザにとって役立つ情報を提供します。
以下では、メタタグの基本的な役割と使用例について解説します。
メタタグの役割とSEOへの影響
メタタグはウェブページの「メタ情報（データに関するデータ）」を指定します。
この情報には、以下のようなものが含まれます。
- 検索エンジンのための情報（SEO）: ページのタイトルや説明文を検索エンジンに伝えることで、検索結果の表示を最適化します。
- 文字エンコーディングの設定: ページがどの文字セットを使用しているかを指定します。
- ビューポート設定: モバイルデバイスでの表示を調整します。
HTMLメタタグの基本例
以下はよく使用されるメタタグの例です。
1. 文字エンコーディングの指定
ページが正しく表示されるように文字コードを指定します。通常、UTF-8が使用されます。
何も考えず、とりあえずheadには以下のコードは必ず書くと覚えてもOKです。
<meta charset="UTF-8">
2. メタディスクリプション（ページの説明）
検索エンジンでページ情報がどのように表示されるかを設定します。
インターネットで何かを検索したときに、各サイトの名前の下にそのサイト説明文が表示されますが、その内容がこのメタディスクリプションに書かれた内容になります。
<meta name="description" content="HTMLのメタタグについて学びましょう。">
3. メタキーワード（キーワードの設定）
検索エンジン向けにページに関連するキーワードを指定します。 ※近年の検索エンジンでは、キーワードの指定はあまり重要視されなくなっています。
<meta name="keywords" content="HTML, メタタグ, ウェブデザイン">
昔のインターネットでは検索エンジンへアピールするために、少しでも関係ありそうな単語は数十個も無意味に羅列したサイトが沢山ありましたね…
4. ビューポートの設定
モバイルデバイスでのページ表示を最適化します。
Webサイトは基本的にパソコンで見られる前提の構成となっていますが、現在はスマートフォンで見る人の方が圧倒的に多くなっています。
スマートフォンでも綺麗に見れるようにするため、以下のコードも必ず入れるようにしましょう。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
HTMLメタタグの使用例
以下は複数のメタタグを含む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>© 2025 Web Design Team</p>
</footer>
</body>
</html>メタタグは目に見えない部分でウェブページを支える重要な要素です。
これを適切に使用することで、検索エンジンへの対応やページのパフォーマンスが向上します。
【まとめ】HTMLセクションタグとメタタグのポイント
これまでの「HTMLの基本」シリーズを通じて、ウェブページ作成に必要な基本要素を学んできました。
HTMLはウェブの土台を形作る非常に強力なツールです。このシリーズで学んだ内容を活かして実際に自分のウェブページを作成してみることで、さらに理解が深まるでしょう。
ここまで学習を進めてきた皆さん、お疲れさまでした！
HTMLの基礎をしっかり身につけた今、次のステップとして「CSSの基本」に進む準備が整いました。CSSを使うことで学んだHTMLにデザインを加え、より魅力的で視覚的に優れたウェブページを作れるようになります。
ここからウェブデザインの世界が一気に広がります。
新たなチャレンジが皆さんを待っていますので、ぜひ楽しんで取り組んでください！
練習問題1-7：セクションタグを使いこなそう
- 練習問題に挑戦する人はここをクリック！
-
VSCで「training1-7.html」というファイルを作って保存してください。
そのファイルにhtmlコードを書き、ブラウザに以下のように表示させましょう。また、画像内の文言に従って正しくタグを配置してください。
<<前のページ
記事一覧
次のページ>>
初めてのWebサイトを作ろう1-7
このサイトの Lesson1-1（HTML学習の入り口） から順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。
サイトのタイトルは「自分で作る！HTML＆CSSの学習サイト」
この「初心者のためのプログラミングテキスト＆問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。
- Webサイト制作に挑戦する人はここをクリック！
-
自分だけのWebサイト制作にはベースとなる基本セットが必要になります。
まだ入手していない人はLesson1-1の記事下部からダウンロードして下さい。
Lesson1-7のまとめノートと練習問題を追加しよう
このLessonのまとめノートと練習問題の解答を、MyWebsiteフォルダに追加しましょう。
１．練習問題の解答を保存
練習問題1-7で作成した「training1-7.html」を、ダウンロードした「lesson1（学習フォルダ）」の中に保存してください。
トップページからリンクで飛べるようになりますので確認しましょう。
２．まとめノートを作成・保存
下記のHTMLコードは、このLesson1-7で紹介した内容を端的にまとめてブラウザ表示するためのコードです。
これをコピーして「MyWebsite1-7.html」という名前で保存し、「lesson1（学習フォルダ）」の中に保存してください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lesson1-7</title> <link rel="stylesheet" href="style/styles-lesson1.css"> </head> <body> <main class="container"> <h1>Lesson1-7：セクションタグとメタタグを知ろう</h1> <h2>目的・要点</h2> <p>このレッスンでは、HTMLのセクションタグとメタタグの役割について学びました。セクションタグはWebページの構造を論理的に整理するための要素であり、メタタグはページの補足情報を提供し、SEOやブラウザの挙動に影響を与えます。</p> <h2>このレッスンで学習した内容</h2> <h3>セクションタグ（ページの構造を整理）</h3> <ul> <li><code><header></code>：ページやセクションのヘッダー部分を定義。</li> <li><code><footer></code>：ページやセクションのフッター部分を定義。</li> <li><code><main></code>：ページの主要コンテンツ部分を指定（1ページ1つが基本）。</li> <li><code><article></code>：独立したコンテンツ（ニュース記事やブログ投稿など）。</li> <li><code><section></code>：関連する内容をグループ化し、意味的に区分。</li> <li><code><aside></code>：補足情報やサイドバーに利用。</li> <li><code><nav></code>：ナビゲーションメニューの設定。</li> </ul> <h3>メタタグ（ページの追加情報を提供）</h3> <ul> <li><code><meta charset="UTF-8"></code>：文字エンコーディングを指定。</li> <li><code><meta name="description" content="ページの説明"></code>：検索エンジンにページの概要を伝える。</li> <li><code><meta name="viewport" content="width=device-width, initial-scale=1.0"></code>：モバイル対応の設定。</li> <li><code><meta name="author" content="作成者名"></code>：ページの著者情報を指定。</li> </ul> <h2>トピック・豆知識</h2> <ul> <li><strong>SEO対策とメタタグ：</strong> 適切なメタタグを設定することで、検索エンジンにページの内容を正しく伝え、検索結果の表示を最適化できる。</li> <li><strong>アクセシビリティ向上：</strong> セクションタグを適切に使用すると、スクリーンリーダーや検索エンジンがページを理解しやすくなる。</li> <li><strong>CSSとの連携：</strong> セクションタグを使用すると、CSSでレイアウトやデザインを簡単に適用できる。</li> </ul> <h2>まとめ</h2> <p>セクションタグを活用することで、Webページの構造を論理的に整理し、視認性を向上させることができます。また、メタタグを適切に設定することでSEOやモバイル対応を強化できます。次のステップでは、CSSを学び、HTMLの構造をより美しくデザインする方法を身につけましょう！</p> <p><a href="../MyWebsite.html">トップページへ戻る</a></p> </main> <footer> <p>© 初心者のためのプログラミングテキスト＆問題集</p> </footer> </body> </html>※ MyWebsite1-7.htmlは先ほどのtraining1-7.htmlと違い、少しだけCSSを使用して見た目を整理しています。
これでLesson1-7の作業は完了です。
継続は力なり。次のLessonも、引き続き頑張ってください^^
FAQ｜セクションタグとメタタグに関するよくある質問
今回の記事に関する「よくある質問」とその解答について、以下の内容を参考にしてください。
- Q1. セクションタグ（
<header>,<main>,<footer>など）を使うことで、どのようにSEOに効果がありますか？ -
セクションタグを正しく使うことで、Webページの構造を検索エンジンが理解しやすくなります。たとえば、
<main>タグで主なコンテンツ部分を明示したり、<header>や<footer>でそれぞれの役割を区分けすることで、検索エンジンのクロールが効率化し、SEO評価が向上することがあります。
- Q2. メタタグはページごとにどんな風に使い分けるべきですか？
-
メタタグはページ内容によって適切に設定することが重要です。たとえば、記事ごとに
<meta name="description">の内容を変えることで、検索結果で表示される説明文をカスタマイズできます。また、<meta charset="UTF-8">は全ページ共通で必要ですが、<meta name="robots">などはページの公開・非公開状況によって使い分けます。
- Q3.
<main>タグと<section>タグの違いと使い分け方は？ -
<main>タグは、そのページで最も重要なコンテンツ部分を一つだけ囲むために使います。一方、<section>タグは、記事やページの中で意味的なまとまりごとに使うタグで、複数回使うことができます。それぞれの役割を意識して使い分けることで、構造化されたHTMLを書けるようになります。
よくあるトラブルと解決法｜セクションタグとメタタグ編
今回の記事に関する「よくあるトラブル」とその原因、解決法について、以下の内容を参考にしてください。
セクションタグを使ったのに、ページ全体のレイアウトが崩れる
- トラブルの原因と対処法を見る
-
トラブルの原因例
<header>,<main>,<footer>などのセクションタグを使ったとき、デフォルトのCSSが未設定のため、思い通りに表示されずレイアウトが崩れることがあります。トラブルの解決法
まず、セクションタグに対して独自のCSSが適用されているか、もしくは何も指定されていないか確認してください。また、特定のセクションタグにmarginやpaddingが設定されていない場合や、他の要素と重なっていないかを調べ、必要に応じてスタイルを追加して調整しましょう。
メタタグを設定したのに、検索結果に反映されない
- トラブルの原因と対処法を見る
-
トラブルの原因例
<meta name="description">などのメタタグを設定しているのに、Googleなどで意図した説明文が表示されない場合があります。これは、metaタグの内容が不適切だったり、正しい場所に記述されていない場合に起こりやすいです。トラブルの解決法
metaタグが
<head>タグ内に正しく記述されているかを確認してください。また、descriptionの内容がページ内容と合っているか、過度に短い・長い文章になっていないかもチェックしましょう。サーチエンジンが独自に説明文を選択することもあるため、複数のページでdescriptionが重複していないかも確認してください。
<main>タグや<section>タグを使ったら、スクリーンリーダーで内容が正しく読み上げられない
- トラブルの原因と対処法を見る
-
トラブルの原因例
HTML5のセクションタグには自動的に意味が与えられますが、正しく使わなかったり、ネストや構造が不適切だと、アクセシビリティに影響が出る場合があります。
トラブルの解決法
タグの使い方や配置が正しいか確認してください。たとえば、
<main>タグは1ページにつき1回だけ使い、<section>タグは意味のあるまとまりごとに使われているかを見直しましょう。見出しタグ（<h1>～<h6>）と一緒に使い、論理的な順序や階層になっているかもチェックしてください。
<<前のページ
記事一覧
次のページ>>