先生と生徒の会話形式で理解しよう

生徒

「HTMLのh1とかh2って、文字を大きくするためのタグなんですか？」

先生

「見た目が大きくなることもありますが、本当の役割は文章の構造を表すことなんですよ。」

生徒

「構造っていうのは、どういう意味ですか？」

先生

「本やノートの見出しのように、内容のまとまりを示す役割です。検索エンジンにもとても大切なんです。」

1. HTMLのh1〜h6とは何か

HTMLのh1からh6は、見出しを表すためのタグです。hは「ヘディング」と呼ばれ、日本語では見出しという意味になります。h1が一番大きな見出しで、h6に向かうほど小さな見出しになります。これは文字の大きさの順番ではなく、内容の重要度や階層を表しています。

たとえば本でいうと、h1は本のタイトル、h2は章のタイトル、h3は節のタイトルというイメージです。HTMLでは、この見出し構造を正しく書くことで、ページ全体がとても読みやすくなります。

2. 見出しタグが必要な理由

見出しタグは、人と検索エンジンの両方のために使われます。人にとっては、ページをざっと見たときに内容を理解しやすくなります。検索エンジンにとっては、ページに何が書いてあるのかを判断する重要な手がかりになります。

検索エンジン最適化と呼ばれる考え方では、h1やh2にページのテーマとなるキーワードを自然に入れることが大切とされています。これにより、HTML 見出しタグ、h1 h2 違い、HTML 初心者といった検索でも見つかりやすくなります。

h1タグは、ページ全体の一番大切な見出しです。基本的には、1ページに1つだけ使うのが良いとされています。これは、そのページの主題をはっきり示すためです。

ブログ記事であれば記事のタイトル、会社サイトであればページの見出しになります。h1に書かれた内容は、検索エンジンが特に重視します。


<h1>HTML見出しタグの基本を学ぼう</h1>
<p>このページでは、h1からh6までを解説します。</p>

ブラウザ表示

h2からh6は、h1の内容を細かく分けるために使います。いきなりh1の次にh4を書くのではなく、順番に使うことが重要です。これは目次を作る感覚に近いです。

正しい階層を守ることで、HTMLの構造が整理され、アクセシビリティと呼ばれる使いやすさも向上します。アクセシビリティとは、年齢や障害に関係なく使いやすい設計のことです。


<h1>料理レシピ</h1>
<h2>材料</h2>
<h3>野菜</h3>
<h3>調味料</h3>

ブラウザ表示

初心者の方がよく勘違いするのが、見出しタグは文字を大きくするためのものだと思ってしまう点です。確かにブラウザでは大きく表示されますが、本来の目的は意味付けです。

文字の大きさや色を変えたい場合は、CSSという仕組みを使います。CSSとは、見た目を整えるためのルールのことです。見出しタグを装飾目的だけで使うのは避けましょう。


<h2>お知らせ</h2>
<p>営業時間が変更になりました。</p>

ブラウザ表示

Googleなどの検索エンジンは、HTMLの構造を読み取ってページ内容を理解します。特にh1とh2は、そのページが何について書かれているかを判断する重要な材料になります。

そのため、見出しには内容に合った自然な言葉を使うことが大切です。無理にキーワードを詰め込みすぎると、逆に評価が下がることもあります。

よくある間違いとして、h1を何個も使ってしまうことや、順番を飛ばして使うことがあります。また、見た目を整えるためだけに見出しタグを使うのも避けたいポイントです。

HTMLは文章の意味を伝える言語です。見出しタグは、文章の骨組みを作る大切な要素だと覚えておきましょう。


<h1>会社案内</h1>
<h2>サービス内容</h2>
<h2>会社概要</h2>

ブラウザ表示

まずは紙に書くつもりで、ページの構成を考えてみましょう。一番伝えたいことをh1、その下の話題をh2、さらに詳しい内容をh3というように整理します。

この考え方を身につけると、HTMLだけでなく文章を書く力も自然と上達します。見出しタグは、ウェブ制作の基礎中の基礎です。