ZeroPlus Media > Web制作 > HTML/CSS > 【HTML】見出しタグ・段落タグの使い分けについて解説

【HTML】見出しタグ・段落タグの使い分けについて解説

HTML/CSS

2022/08/22

2023/06/17

HTMLでよく使われるタグに、見出しタグと段落タグがあります。

見出しタグと段落タグにはそれぞれ役割とルールがあります。見出しタグと段落タグどちらもユーザーに適切な情報を伝えるとともに、検索エンジンでも見られる部分になるため、適切な使用が求められます。

この記事では、「HTMLの見出しタグ・段落タグの使い分け」について解説していきます。

この記事のゴールは「見出しタグ・段落タグの役割を理解し、適切に使い分けた記述ができるようになること」です。

いっしょに学習していきましょう。

この記事で身につく内容

HTMLの見出しタグ・段落タグの基礎知識と使い分け方

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

見出しタグ（hタグ）とは
- 見出しタグの使い方
段落タグ（pタグ）とは
段落タグ（pタグ）の使い方
見出しタグと段落タグを記述してみよう
まとめ

見出しタグ（hタグ）とは

見出しタグはHTMLで「hタグ」として使うことができます。hは見出しを意味するheadingの頭文字を表しています。hタグは、ページのタイトルや見出しに設定します。hタグはh1からh2, h3…とh6まで使うことができます。

基本書式

<h1>h1の見出しです。</h1>
<h2>h2の見出しです。</h2>
<h3>h3の見出しです。</h3>
<h4>h4の見出しです。</h4>
<h5>h5の見出しです。</h5>
<h6>h6の見出しです。</h6>

h1が最も大きな見出しで、h2がその次に大きな見出し、h3がh2の次に大きな見出し...のように数字が大きくなるほど見出しは小さく、数字が小さいほど大きな見出しの意味になります。

基本書式でブラウザの表示を確認します。

出力結果

使用できる見出しはh1～h6までで、h7以降はありません。

見出しタグはユーザーに記事の概要を素早く伝えることができます。また、検索エンジンに文書の内容を伝える役割があります。見出しの内容を設定し、検索エンジンに伝えることでSEOの向上に繋がります。

特にブログサイトなどでは記事のタイトルとして用いられるため、h1タグはSEOにおいてとても重要な役割を果たします。
そんなh1タグは「デジマケの教科書」で詳しく解説されています。ぜひ参考にしてください。

h1タグは複数使用するとSEOに悪影響がある？最適な設定方法とは｜デジマケの教科書

見出しタグの使い方

大きな見出しのh1タグは、主にサイトのタイトルや記事のタイトルなどに使われます。

h1タグは、ひとつの記事に対して1つ設定するのが望ましいです。（ただし、Googleの公式見解では「h1タグを複数使用することはSEO的に問題ない」とされています)

h1~h6タグは、数字が小さいほど大きな見出し、数字が大きいほど小さな見出しの意味になります。実際に見出しタグを並べる際は、h1からh2、その次にh3…のように大きな見出しから小さい見出しの順に使用します。

正しい見出しの使い方の例

<h1>h1の見出しです。</h1>
<p>h1の見出しの内容が入ります。</p>

<h2>h2の見出しです。</h2>
<p>h2の見出しの内容が入ります。</p>

<h3>h3の見出しです。</h3>
<p>h3の見出しの内容が入ります。</p>

<h4>h4の見出しです。</h4>
<p>h4の見出しの内容が入ります。</p>

<h5>h5の見出しです。</h5>
<p>h5の見出しの内容が入ります。</p>

<h6>h6の見出しです。</h6>
<p>h6の見出しの内容が入ります。</p>

例えば次のようにh3タグのあとにh2タグがくる、というのは好ましくありません。

間違った見出しの使い方の例

<h1>h1の見出しです。</h1>
<p>h1の見出しの内容が入ります。</p>

<h3>h3の見出しです。</h3>
<p>h3の見出しの内容が入ります。</p>

<h2>h2の見出しです。</h2>
<p>h2の見出しの内容が入ります。</p>

<h6>h6の見出しです。</h6>
<p>h6の見出しの内容が入ります。</p>

<h5>h5の見出しです。</h5>
<p>h5の見出しの内容が入ります。</p>

<h4>h4の見出しです。</h4>
<p>h4の見出しの内容が入ります。</p>

基本的にh1からh6の順番通り使用します。

ただし、次のように構成的に使う場合は、h3タグのあとにh2タグが来るケースは問題ありません。

<h1>h1の見出しです。</h1>
<p>h1の見出しの内容が入ります。</p>

<section>
  <h2>h2の見出しです。</h2>
  <p>h2の見出しの内容が入ります。</p>

  <h3>h3の見出しです。</h3>
  <p>h3の見出しの内容が入ります。</p>

   <h3>h3の見出しです。</h3>
   <p>h3の見出しの内容が入ります。</p>
</section>

<section>
  <h2>h2の見出しです。</h2>
  <p>h2の見出しの内容が入ります。</p>

  <h3>h3の見出しです。</h3>
  <p>h3の見出しの内容が入ります。</p>

   <h3>h3の見出しです。</h3>
   <p>h3の見出しの内容が入ります。</p>
</section>

大きな見出し（h1タグ）の中に、2番目に大きな見出し（h2タグ）が複数あり、それぞれのh2見出しの中に小見出し（h3タグ）が複数ある、という構成になっています。

また、見出しタグは名前のとおり見出しに使われるタグなので、見出しタグで文章を作らないようにしましょう。文章を作る場合は、段落タグであるpタグを使用します。

段落タグ（pタグ）とは

段落タグはHTMLで「pタグ」として使うことができます。pタグはparagraph（パラグラフ）の頭文字です。見出しのhタグとセットでpタグが使われることが多いです。

基本書式

<p>段落・テキストが入ります。</p>

pタグは見出しタグと同様に、文章をユーザーに分かりやすく伝える役割があります。

段落タグ（pタグ）の使い方

pタグは、見出しタグとセットで使用することが多いです。例えば次のように使うことができます。

<h1>h1の見出しです。</h1>
<p>h1の見出しの内容が入ります。</p>

<h2>h2の見出しです。</h2>
<p>h2の見出しの内容が入ります。</p>


<h3>h3の見出しです。</h3>
<p>h3の見出しの内容が入ります。</p>

<h4>h4の見出しです。</h4>
<p>h4の見出しの内容が入ります。</p>

<h5>h5の見出しです。</h5>
<p>h5の見出しの内容が入ります。</p>

<h6>h6の見出しです。</h6>
<p>h6の見出しの内容が入ります。</p>

出力結果

pタグの中にpタグを使用することはできません。pタグはブロック要素なので、spanタグのようなインライン要素はpタグの中で使用することができます。

見出しタグと段落タグを記述してみよう

見出しタグ・段落タグの基礎知識を踏まえ、以下のHTMLに見出しタグ・段落タグを記述してみましょう。

見出しタグ・段落タグの条件は次のとおりです。

h1タグを1つ、h2タグを2つ、h3タグを4つ記述する
各見出しタグには、最低でも1つ段落タグを記述する
記事構成的に並べる

<body>



</body>

条件に当てはめたタグの使い方ができたでしょうか？

以下は、上記条件に当てはめた記述例になります。

<h1>h1の見出しです。</h1>
<p>h1の見出しの内容が入ります。</p>

<section>
  <h2>h2の見出しです。</h2>
  <p>h2の見出しの内容が入ります。</p>

   <h3>h3の見出しです。</h3>
   <p>h3の見出しの内容が入ります。</p>

   <h3>h3の見出しです。</h3>
   <p>h3の見出しの内容が入ります。</p>
</section>

<section>
  <h2>h2の見出しです。</h2>
  <p>h2の見出しの内容が入ります。</p>

  <h3>h3の見出しです。</h3>
  <p>h3の見出しの内容が入ります。</p>

  <h3>h3の見出しです。</h3>
  <p>h3の見出しの内容が入ります。</p>

</section>