[HTML] h1タグの役割と使い方

MARKLEAPS

2024.12.17

h1タグの役割や使い方について解説します。

目次

h1タグとは

見出しタグ（h1～h6）はHTMLの見出し階層を表すタグであり、h1タグは最も上位に位置します。
一般的に、そのページ全体の主題やメインタイトルを示すために使われます。

h1タグの主な役割

h1タグには以下のような役割があります。

・検索エンジンがコンテンツの構造と内容を理解しやすくなる
・ユーザーが記事の主題を瞬時に把握できる
・スクリーンリーダー利用者にもページの主題が明確に伝わる

<title>タグと<h1>タグの違い

HTMLタグである<title>タグと<h1>タグはどちらもページの内容を伝えますが、その役割や表示場所に違いがあります。

	titleタグ	h1タグ
役割	ページ訪問前のユーザーに内容を伝える	ページ閲覧中のユーザーに内容を伝える
表示場所	検索結果やソーシャルメディアなど、ページ外	Webページ内
タグの位置	<head>タグ内	見出しタグ（hタグ）の最上位

ロゴに<h1>を使うのはもったいない？

h1タグは「ページに何が書かれているか」をユーザーや検索エンジンに示すための最も重要な見出しです。
ロゴにh1を使うことは、本で例えると「すべての章が同じタイトルになる」ようなものであり、各ページの内容が簡潔に伝わりにくくなります。

ページ内で最も伝えたい内容が会社名である場合は、ロゴにh1を使っても問題ありません。
しかし、それ以外の場合は、サービス名や記事タイトルなど、そのページで一番強調したい内容にh1を使うことが適切です。

h1タグの使い方に迷ったら、「このページで一番伝えたいことは何か？」を考えてみましょう。

HTML

よく読まれている関連記事

[CSS] カラーコードで透明度を指定する方法

関連最新記事