HTML 見出しタグを理解する

はじめに

この実験では、学生たちは HTML 見出しタグを探索し、異なる見出しレベルを使って構造化されたウェブページコンテンツを作成する方法を学びます。この実験では、参加者が基本的な HTML ドキュメントを作成し、<h1>から<h6>までの見出しタグの階層構造を理解し、これらのタグがどのように異なる重要度のテキストを整理して表示するかを示します。

参加者はまず基本的な HTML 構造を設定し、次に徐々に見出しタグを追加して、それらの視覚的および意味的な違いを理解します。実験が終了するまでに、学生たちは見出しタグを効果的に使う実践的なスキルを身につけ、ウェブページデザインにおけるそれらの役割を理解し、ブラウザが異なる見出しサイズをレンダリングして、明確で整理されたコンテンツの表示を作成する方法を学びます。

基本的な HTML ドキュメントを作成する

このステップでは、見出しタグを理解するための基礎となる基本的な HTML ドキュメントを作成する方法を学びます。

まず、WebIDE を開き、~/projectディレクトリに移動します。ファイルエクスプローラで右クリックして「新しいファイル」を選択することで、index.htmlという新しいファイルを作成します。

ここで作成する基本的な HTML ドキュメントの構造は次の通りです。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First HTML Page</title>
  </head>
  <body>
    <!-- Your content will go here -->
  </body>
</html>

重要なコンポーネントを分解してみましょう。

<!DOCTYPE html>はこれが HTML5 ドキュメントであることを宣言します
<html>は HTML ページのルート要素です
<head>はドキュメントに関するメタ情報を含みます
<body>は表示されるページコンテントを含みます

このファイルをブラウザで表示したときの例の出力は次の通りです。

[表示内容のない空の白いページ]

次に、WebIDE でファイルを保存します。ファイルエクスプローラを確認するか、ターミナルを使って、ファイルが作成されたことを確認できます。

H1 から H6 までの見出しタグを調べる

このステップでは、ウェブページ上のコンテンツの構造と階層を定義するために使用される HTML 見出しタグについて学びます。HTML は<h1>から<h6>までの 6 つの見出しレベルを提供しており、<h1>が最も重要で、<h6>が最も重要度が低いものとなります。

前のステップで作成したindex.htmlファイルを開きます。<body>セクションを更新して、異なる見出しタグを含めます。

<body>
  <h1>メイン見出し（最大）</h1>
  <h2>サブ見出しレベル 2</h2>
  <h3>サブ見出しレベル 3</h3>
  <h4>サブ見出しレベル 4</h4>
  <h5>サブ見出しレベル 5</h5>
  <h6>サブ見出しレベル 6（最小）</h6>
</body>

見出しタグに関するポイント：

<h1>は通常、メインページのタイトルまたは最も重要な見出しに使用されます
見出しは階層的な順序で使用する必要があります
各見出しレベルは、ドキュメント構造において異なる重要度を表します

ブラウザで表示したときの例の出力：

HTML 見出しタグの階層構造の例

WebIDE でファイルを保存します。ブラウザでファイルを開いて、異なる見出しタグがどのように見えるかを確認できます。

異なる見出しサイズを比較する

このステップでは、異なる見出しタグのサイズがどのように視覚的に異なり、ドキュメントの視覚的な階層構造にどのような影響を与えるかを探索します。index.htmlファイルを開き、サイズの違いをより明確に示すようにコンテンツを変更します。

<body>セクションをより詳細な例で更新します。

<body>
  <h1>HTML 見出し探索へようこそ</h1>
  <p>h1 から h6 までの見出しサイズの変化に注目してください。</p>

  <h1>見出し 1 - 最大で最も重要</h1>
  <p>これは h1 見出しで、通常はメインタイトルに使用されます。</p>

  <h2>見出し 2 - セクションタイトル</h2>
  <p>H2 はドキュメント内の主要セクションに使用されます。</p>

  <h3>見出し 3 - サブセクションタイトル</h3>
  <p>H3 はサブセクションまたは小さな区分を表します。</p>

  <h4>見出し 4 - 小さな見出し</h4>
  <p>H4 は重要度の低い見出しに使用されます。</p>

  <h5>見出し 5 - 非常に小さな見出し</h5>
  <p>H5 はめったに使用されませんが、追加の階層構造に備えて用意されています。</p>

  <h6>見出し 6 - 最小の見出し</h6>
  <p>H6 は最も目立たない見出しタグです。</p>
</body>

主な観察結果：

各見出しタグ（<h1>から<h6>）は徐々に小さくなる既定のサイズを持っています
視覚的な階層構造は読者がコンテンツの構造を理解するのを助けます
ブラウザの既定のスタイルは自動的に見出しのサイズを調整します

ブラウザで表示したときの例の出力：

HTML 見出しサイズ比較

WebIDE でファイルを保存し、ブラウザで開いてサイズの違いを確認します。

見出しタグの制限をテストする

このステップでは、HTML 見出しタグを使用する際の重要な制限とベストプラクティスを探索します。これらの制約を理解することで、より意味論的に正しく、アクセシブルなウェブページを作成することができます。

見出しタグの制限を示すために、次のコンテンツでindex.htmlファイルを更新します。

<body>
    <h1>メインページタイトル</h1>

    <h2>誤った見出し階層の例</h2>

    <!-- 不適切な見出しのネストを示す -->
    <h3>サブセクション</h3>
    <h5>これは推奨されません！</h5>

    <!-- 見出しの過度な使用 -->
    <h1>別のメイン見出し</h1>

    <!-- 論理的な構造がない見出しの混在 -->
    <h6>非常に小さな見出し</h6>
    <h2>より大きな見出しに戻る</h2>

    <p>忘れてはいけない重要な制限事項：</p>
    <ul>
        <li>見出しレベルを飛ばさないでください</li>
        <li>ページには 1 つの<h1>のみを使用してください</li>
        <li>論理的な見出し階層を維持してください</li>
    </ul>
</body>

重要な見出しタグの制限事項：

見出しレベルを飛ばさないでください（例：h1 から直接 h4 に移行するなど）
メインタイトルにはページに 1 つの<h1>タグのみを使用してください
論理的で一貫性のある見出し構造を維持してください
見出しはコンテンツの重要度を反映する必要があります
不適切な使用は SEO やアクセシビリティに悪影響を及ぼす可能性があります

ブラウザで表示したときの例の出力：

不整合した見出し階層の例

WebIDE でファイルを保存し、見出しの使用が不整合しているとどのように混乱するかを確認します。

まとめ

この実験では、参加者は基本的な HTML ドキュメントを作成し、<h1>から<h6>までの 6 つの異なる見出しレベルを探索することで、HTML 見出しタグの基本を学びました。この実験では、学習者が標準的な HTML 構造を構築し、見出しタグの目的と階層構造を理解し、これらのタグがどのようにウェブページのコンテンツを整理して構造化するかを示すためのガイダンスを提供しました。

実践演習では、完全な HTML テンプレート付きのindex.htmlファイルを作成し、さまざまな見出しタグを挿入してそれらの視覚的および意味論的な違いを紹介し、見出しが全体的なドキュメント構造と読みやすさにどのように貢献するかを理解することが行われました。参加者は、最も重要な見出しを表す<h1>と最も重要度の低い見出しを表す<h6>を使用してコンテンツの階層構造を確立するための見出しタグの使用に関する実践的な経験を得ました。