【ご案内】このページの内容は、AI(GPT)が作成したテキストをもとに構成されています。必ずしも完全に正確とは限らないため、学習や制作に利用する際は、公式ドキュメントや信頼できる資料とあわせて確認することをおすすめします。

HTMLの見出しタグ h1〜h5 について

このページでは、HTMLの見出し要素である h1 から h5 までのタグについて説明します。

見出しタグの「h」は、「Heading(見出し)」の頭文字です。つまり h1 は「Heading レベル1」、h2 は「Heading レベル2」という意味になります。

見出しタグは、文書の「タイトル」や「章・節の見出し」を表すためのタグで、文書構造を分かりやすくする役割があります。

h1〜h5 の基本的な意味

見出しタグは、数字が小さいほど重要度が高い見出しを表します。

h1 はそのページで最も重要な見出し(ページタイトルなど)に使われます。

h2 は h1 の下のレベルの見出し、h3 は h2 の下のレベルの見出し、というように階層的に使います。

各見出しタグの役割

h1 ページ全体のタイトルなど、最上位の見出しに使います。

h2 ページ内の大きな章やセクションのタイトルに使います。

h3 h2 の中に含まれる小さな節や項目のタイトルに使います。

h4 h3 をさらに細かく分けたいときの見出しに使います。

h5 h4 よりもさらに細かいレベルで区切りたいときに使います。

基本的な書き方

見出しタグは、開始タグと終了タグでテキストを囲んで使います。

例 h1 の場合は、次のように書きます。

<h1>サイトのタイトル</h1>

例 h2 の場合は、次のように書きます。

<h2>このページの大見出し</h2>

このように、<h1>〜<h1> や <h2>〜<h2> のあいだに見出しとして表示したい文字を書きます。

ブラウザは、見出しタグを通常のテキストよりも大きな文字や太字で表示し、段落とは異なる見た目で区別します。

h1〜h5 のサンプル

以下は、実際の h1 から h5 までの表示例です。

これは h1 の見出しです

ページのタイトルなどに使われる、最も重要な見出しです。

これは h2 の見出しです

大きな章やセクションのタイトルとして使われます。

これは h3 の見出しです

h2 で区切られた章の中の、小さい項目の見出しとして使われます。

これは h4 の見出しです

さらに細かく内容を分けたいときに使います。

これは h5 の見出しです

必要に応じて、より細かい階層構造を表したいときに使います。

見出しタグを使うメリット

見出しタグを正しく使うことで、文書の構造がはっきりします。

読む人にとって、どこからどこまでがどの話題なのかが分かりやすくなります。

検索エンジンにも文書の構造や重要なキーワードが伝わりやすくなり、SEO(検索最適化)の観点でも役立ちます。

スクリーンリーダーなどの支援技術も、見出し情報を利用して文書を理解しやすくなります。

見出しタグと段落タグの違い

見出しタグ h1〜h5 は、章や節の「タイトル」を表します。

段落タグ p は、本文の「まとまり(段落)」を表します。

一般的には、h1〜h5 で見出しを書き、その下に p で本文を書く、という形で組み合わせて使います。

まとめ

見出しタグ h1〜h5 は、文書の構造と重要度を表すためのタグです。

数字が小さいほど重要度が高く、h1 が最上位、h5 がより細かいレベルの見出しです。

見出しタグの「h」は Heading(見出し)を表しており、それぞれが「Heading レベル1〜5」として文書の階層を示します。

見出しタグを正しく使うことで、読みやすく整理された Web ページを作ることができます。