ながみえ
HTML/CSSレッスン1-7『セクションタグとメタタグの基本と使い方』記事用アイキャッチ画像

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

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

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レッスン1-6『フォーム作成の基本と実践ガイド』記事用アイキャッチ画像

記事一覧

HTML/CSS学習カテゴリの親ページ用アイキャッチ画像（Webサイト制作入門）、記事一覧へのリンク案内

次のページ>>

HTML/CSSレッスン1-☆1『HTMLの『属性』とは？タグに命を吹き込む重要なポイント！』記事用アイキャッチ画像

HTMLのセクションタグとは？

【HTML】勉強猫がノートパソコンを前にして学習を始める様子。記事内の学習スタート用イラスト

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

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

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

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

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

参考資料

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

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

主要なHTMLセクションタグを徹底解説

HTML文書は最初にDOCTYPE宣言と<html>開始タグを書き、その後に<head>タグと<body>タグが続くとLesson1-1で学習しました。

セクションタグは<body>タグの中身をさらに分割するものです。

今あなたが見ているこのページを例にすると、冒頭の「初心者のためのプログラミングテキスト＆問題集」というサイトタイトルと各言語へのリンクがあるヘッダー部分を定義する<header>タグ 。

記事本文を書く <main>タグ 。

そして末尾のパンくずリストや著作権情報などを書くフッター部分を定義する <footer>タグ などがあります。

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

使用しなくてもWebページを表示すること自体はできますが、見やすいサイト作りや検索エンジン最適化（SEO）のためには必ず必要となるものです。

初心者向けHTMLの基本構造を示す概念図。DOCTYPE宣言、head、body、header、main、footerタグの役割を解説。

<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>タグを使用します。

<header>
  <h1>ウェブサイトのタイトル</h1>
</header>
<main>
  <h2>メインコンテンツ</h2>
  <p>ここにこのページのメインコンテンツが表示されます。</p>
</main>
<footer>
  <p>&copy; 2025 MyWebsite. All rights reserved.</p>
</footer>

<main>タグの使いどころ

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

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

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

<header>、<main>、<footer>の３つのセクションタグを使用して、以下の条件を満たすコードを作成してください。

  1. <header>タグ内で、ページのタイトルを表示する。
  2. <main>タグ内で、以下の2つの内容を表示する。
    ・自己紹介
    ・趣味の紹介
  3. <footer>タグを使って、著作権表示を記載する。（「© 2025 あなたの名前」など）

<article>タグで独立したコンテンツを作成

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

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

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

<article>タグの使いどころ

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

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

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

<section>タグでセクションを区切る方法

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

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

<article>
  <section>
    <h2>サービス内容</h2>
    <p>私たちはウェブ開発を専門としています。</p>
  </section>
  <section>
    <h2>カスタマイズ対応の開発</h2>
    <p>お客様のニーズに合った開発を行います。</p>
  </section>
</article>

<section>タグの使いどころ

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

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

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

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

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

本サイトでは<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コードには、<main>、<article>、<section>、<aside> のタグが不足しています。

正しい場所にタグを追加して、適切な構造を完成させましょう！

<!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>記事のページ</h1>
    </header>

    <h2>HTMLの基本</h2>

    <h3>記事の概要</h3>
    <p>HTMLはWebページを作成するための言語です。このページでは基本的なHTMLの構造について説明します。</p>

    <h3>記事の本文</h3>
    <p>HTMLの基本的なタグには、<code>&lt;header&gt;</code>、<code>&lt;main&gt;</code>、<code>&lt;footer&gt;</code> などがあります。これらを適切に使うことで、Webページの構造を整えることができます。</p>

    <h3>関連情報</h3>
    <ul>
        <li><a href="#">CSSの基本</a></li>
        <li><a href="#">JavaScriptの入門</a></li>
    </ul>

    <footer>
        <p>© 2025 あなたの名前</p>
    </footer>

</body>
</html>
【HTML】勉強猫がノートパソコンを見ながら考え込む様子。記事内の休憩用イラスト

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>&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】勉強猫がコーヒーを片手にリラックスしている様子。記事内の休憩用イラスト

メタタグとは？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>&copy; 2025 Web Design Team</p>
  </footer>
</body>
</html>

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

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

【HTML】勉強猫がノートパソコンを見ながら考え込む様子。記事内の休憩用イラスト

セクションタグとメタタグの関係を理解しよう

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

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

セクションタグとメタタグの違いと使い分け

  1. セクションタグ
    • body部分に書くことでページ内のコンテンツを意味的に分割し、読みやすさや構造を向上させる。
    • 主にユーザーに直接表示される内容の整理に役立つ。
  2. メタタグ
    • head部分に書くことでページ自体に関する追加情報（メタデータ）を提供する。
    • ユーザーに直接表示されることは少ないが、検索エンジンやブラウザに重要な情報を伝える役割を果たす。

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

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

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

【まとめ】HTMLセクションタグとメタタグのポイント

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

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

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

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

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

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

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

【HTML】勉強猫がノートパソコンに向かい、練習問題に挑戦する様子。記事内の休憩用イラスト

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

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

「HTMLの基本を復習しよう」というタイトルのHTML練習ページ。セクションタグとメタタグについての説明と課題指示が表示された画面。

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

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

サイトのタイトルは「自分で作る！HTML＆CSSの学習サイト」

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

Q
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>&lt;header&gt;</code>：ページやセクションのヘッダー部分を定義。</li>
                <li><code>&lt;footer&gt;</code>：ページやセクションのフッター部分を定義。</li>
                <li><code>&lt;main&gt;</code>：ページの主要コンテンツ部分を指定（1ページ1つが基本）。</li>
                <li><code>&lt;article&gt;</code>：独立したコンテンツ（ニュース記事やブログ投稿など）。</li>
                <li><code>&lt;section&gt;</code>：関連する内容をグループ化し、意味的に区分。</li>
                <li><code>&lt;aside&gt;</code>：補足情報やサイドバーに利用。</li>
                <li><code>&lt;nav&gt;</code>：ナビゲーションメニューの設定。</li>
            </ul>

            <h3>メタタグ（ページの追加情報を提供）</h3>
            <ul>
                <li><code>&lt;meta charset="UTF-8"&gt;</code>：文字エンコーディングを指定。</li>
                <li><code>&lt;meta name="description" content="ページの説明"&gt;</code>：検索エンジンにページの概要を伝える。</li>
                <li><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</code>：モバイル対応の設定。</li>
                <li><code>&lt;meta name="author" content="作成者名"&gt;</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>&copy; 初心者のためのプログラミングテキスト＆問題集</p>
    </footer>
</body>
</html>

※ MyWebsite1-7.htmlは先ほどのtraining1-7.htmlと違い、少しだけCSSを使用して見た目を整理しています。

これでLesson1-7の作業は完了です。

継続は力なり。次のLessonも、引き続き頑張ってください^^

<<前のページ

HTML/CSSレッスン1-6『フォーム作成の基本と実践ガイド』記事用アイキャッチ画像

記事一覧

HTML/CSS学習カテゴリの親ページ用アイキャッチ画像（Webサイト制作入門）、記事一覧へのリンク案内

次のページ>>

HTML/CSSレッスン1-☆1『HTMLの『属性』とは？タグに命を吹き込む重要なポイント！』記事用アイキャッチ画像

FAQ｜HTMLセクションタグとメタタグに関するよくある質問

Q
Q1. セクションタグとdivタグは何が違うのですか？

セクションタグはHTML5で導入されたタグで、ページを論理的・意味的に区分するために使います。

一方、divタグは意味を持たず、主にCSSでスタイルを適用するために使います。

初心者は「意味を持たせたいならセクションタグ、単なるブロックとして使うならdivタグ」と覚えると良いでしょう。

Q
Q2. HTMLでどのセクションタグを使えばいいのか迷います。何か基準はありますか？

使い分けの基準は「その部分がどんな役割を持つのか」です。

例えば、ナビゲーションなら<nav>、独立した記事なら<article>、ヘッダー部分なら<header>といった具合です。

迷ったときは「その部分の役割を説明できるか」を考えてみてください。

Q
Q3. メタタグはどこに書けばいいですか？

メタタグはHTMLの<head>内に書きます。

<body>内に書いてしまうと無効になるので注意が必要です。

初心者は特にこの間違いをしやすいので、<head>内に忘れずに書く習慣をつけましょう。

Q
Q4. メタタグで何を設定すればいいのですか？

最低限、文字コードを指定する<meta charset="UTF-8">、ページの説明を入れる<meta name="description">、画面幅を設定する<meta name="viewport">は設定しましょう。

SEOやモバイル対応においても重要な部分です。

Q
Q5. <main>タグは1つのページにいくつ使えますか？

<main>タグは1つのページに1つだけ使用します。

ページの主要な内容を表すタグなので、複数使うと意味が重複してしまいます。

初心者がよくやりがちなミスなので注意しましょう。

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

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

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

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

記事URLをコピーしました