IT世界の歩き方

Blog Post

h1~h6タグの意味を考慮した使い方

2026-02-02
カテゴリ：HTML/CSS

　前回の記事(HTMLでHello Worldを表示する方法)ではHTMLでHello Worldを表示する方法を解説しました。

テキストを表示することはできましたが、ただ表示するだけでは味気ないので以降はただのテキスト表示ではなくHTMLで見出しや段落など構造の作り方を解説します。まずは前回作成したindex.htmlからHello Worldをいったん削除します。

html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
  • 見出しの作り方(h1~h6タグ)

　最初に見出しをつくります。VS Codeでbodyタグの中でhを入力します。そうするとhから始まるタグの一覧が表示されます。

image

今回は一番大きな見出しにしたいのでh1を選択します。h1を選択してEnterを押すとh1の開始タグと終了タグを入力することができます。

html
<body>
    <h1></h1>
</body>
  • 見出しのルール

　見出しのタグは大きい順にh1~h6の6種類存在します。h1~h6タグには単に文字の大きさを変えるタグではなく明確なルールがあります。

h1~h6タグを正しく使うことはブラウザや検索エンジンに情報を正しく伝えることを学ぶ最初の一歩になります。以降、ルールについて解説します。

  1. 見出しの階層を守る

    h1→h2→h3→・・・という順番でタグを使います。

    数字が小さいほど、文字が大きく表示されます

html
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
<h6>Hello World</h6>
image

h2→h1のように順番を逆にしてはいけません。また、h1→h3→h2のように順番を飛ばしてもいけません。

重要度が高い順に使用するルールです。

image

  • ページ内での役割と回数を守る

    タグ

    役割

    回数

    解説

    h1

    タイトル

    1回

    1. 最も重要な見出しで原則1ページ1回です。例えると本の表紙にタイトルがh1に相当します。
    2. タイトルが2つあったら混乱するようにWebページでもh1は1つにしましょう。

    h2

    章

    複数

    メインの話題でページを大きなブロックに分けるときに使用します。

    h3

    節

    複数

    h2内で細かくトピックを分けるときに使用します。

  • セマンティック（意味的）な使い方

    　HTMLのタグはブラウザや検索エンジンに情報を正しく伝える役割もあります。

    コンテンツの「意味」や「役割」を表すタグを用いてマークアップする手法をセマンティックHTMLといいます。

    もし、ユーザーにテキスト情報を表示するだけでよいのであれば以下のHTMLは全く同じ役割になります。

    3行目の意味は今は分からなくても大丈夫ですが、画面を見ているユーザーには全く同じHello Worldが見えます。

    ですが、ブラウザや検索エンジンにとってはこの2つは全く異なる意味を持ちます。以下のコードを比較してみましょう

    <h2>： コンピューターに「ここから重要な章が始まる」と伝えます。

    <span>： 「ただの文字を大きくしただけ」としか伝わりません。

    コンピューター（Google）が内容を正しく理解できる「論理的に整理されたページ」は、検索順位が高くなる傾向があります。これを**SEO（検索エンジン最適化）**と呼びます。

    検索順位を上げるためにもセマンティックな使い方を覚えましょう。

    • html
    <body>
    <h2>Hello World</h2>
    <span style="font-size: 24px; font-weight: bold;">Hello World</span>
</body>
    image

    <関連記事>