【2-1】HTMLの見出し（hタグ）と段落（pタグ）をわかりやすく解説

前の記事

前の記事

【1-7】HTML・CSSでできることを1分で体験！実践ミニレッスン集

2025年12月6日

次の記事

準備中

HTML で文章を書き始めると、まず最初に出てくるのが見出し（hタグ）と段落（pタグ）です。

見出しはページの”タイトル”や”区切り”をつくり、 p タグはその下に続く文章をまとめるための、もっとも基本的なタグです。

このページでは、 h1 〜 h6 の違いや使い分け、 p タグの正しい使い方、 br タグとの違いなどを、初心者でも迷わないようにやさしく解説していきます。

最後には、見出しと段落だけでできる”シンプルな記事ページ”も実際に作ってみましょう。

見出しタグ（h1〜h6）ってどんな時に使うの？

Web ページには、本や新聞と同じようにタイトルや小見出しが必要です。

その見出しを作るのが h タグ（ heading ：見出し） です。

数字が小さいほど大きく、数字が大きくなるほど小さな見出しになります。

見出しタグとは？

h タグは文章の中で「ここから新しい話題だよ」と示すための”区切り”です。

<h1>タイトル（大見出し）</h1>
<h2>この記事の大きな項目</h2>
<h3>細かい説明</h3>

<h1>タイトル（大見出し）</h1>
<h2>この記事の大きな項目</h2>
<h3>細かい説明</h3>

ブラウザで見ると、 h1 > h2 > h3 の順にだんだん小さくなっていくのがわかります。

数字によって意味が変わる

h タグは h1 〜 h6 まであり、数字によって役割が次のように変わります

まずは h1 ・ h2 ・ h3 を使いこなすだけで問題ありません。

見出しタグを使うと読みやすさが一気に上がる

ただ文章だけを書き続けると、どこが区切りかわかりにくくなります。

そこで見出しを入れると

というメリットがあります。

HTMLは”意味を伝える言語”なので、見出しを正しく使うとページ全体の質も上がります。

使い分けのイメージ（シンプル版）

これだけ覚えておけば OK！

ここまでのまとめ

h1は1ページに1つだけ？その理由をわかりやすく解説

HTML にはたくさんの見出しタグがありますが、その中でも h1 は特別な見出しです。

よく言われるルールが、h1 は1ページに1つだけ

これは”なんとなく決まっている”わけではなく、ページの意味や構造を分かりやすくするために大切なルールです。

h1は”ページのタイトル”だから1つで十分

例えるなら、本のタイトルが1冊に2つあったら困りますよね。

こんな感じで2つあると、「どっちの本？」となってしまいます。

Webページも同じで、このページはいったい何について書いてあるのか？を伝えるのが h1 の役割です。

だから1つだけにするのが自然なんです。

h1が2つ以上あると、ページの“主役”がわからなくなる

次のように h1 が2つあるとします

<h1>プロフィール</h1>
<h1>私の趣味</h1>

<h1>プロフィール</h1>
<h1>私の趣味</h1>

人間が読んでもややこしいですが、ブラウザや検索エンジンにとっても混乱のもとです。

という状態になってしまいます。

検索エンジン（SEO）的にも意味がある

Google などの検索エンジンは、ページの h1 を見て“このページのメインテーマ”を理解します。

だから h1 はひとつのテーマを示すために 1ページ1つ が基本。

複数あると、”このページは何を説明しているのか？”が曖昧になります。

では、他の見出しはどう使う？

というイメージで使えば、自然と読みやすい構造になります。

h1 は CSS で自由にデザインできる

「h1 が大きすぎて使いづらい…」という初心者は多いですが、安心してください。

CSS で好きなサイズに変えられます

h1 {
  font-size: 24px;
}

h1 {
  font-size: 24px;
}

大きさは関係ありません。

役割として”ページのタイトル”なら h1 を使うということが大事です。

ここまでのまとめ

pタグ（段落）の基本とよくある失敗

文章を書くときにもっともよく使うタグが p タグ です。

見出し（ h タグ）がタイトルや区切りなら、 p タグはその下に続く”本文”を書くためのタグです。

まずは基本から見ていきましょう。

pタグは”文章のまとまり”を作るタグ

次のように書くと、1つの段落（パラグラフ）ができます

<p>これは1つ目の段落です。</p>

<p>これは1つ目の段落です。</p>

HTML では、文章のまとまりを p タグで包むことで、読みやすく整った文章を作れます。

文章を複数書くときは、pタグを分けて書く

<p>今日はいい天気です。</p>
<p>明日は出かける予定です。</p>

<p>今日はいい天気です。</p>
<p>明日は出かける予定です。</p>

ブラウザで表示すると、段落ごとに自然な余白が入るので、読みやすくなります。

brタグとの違いを理解しよう（初心者がよく迷うところ）

<p>
  こんにちは。<br>
  よろしくお願いします。
</p>

<p>
  こんにちは。<br>
  よろしくお願いします。
</p>

ここでは文章はひとつの段落だけど、途中で改行したい、というケース。

用途が違うので、慣れてきたら使い分けられるようになります。

初心者がやりがちな書き方ミス

pタグを閉じ忘れる

<p>文章です。
<p>次の段落です。</p>

<p>文章です。
<p>次の段落です。</p>

閉じ忘れた段落がどこまで続くかわからなくなり、レイアウトが崩れる原因になります。

pタグの中に見出し（hタグ）を入れてしまう

<p><h2>タイトル</h2></p>

<p><h2>タイトル</h2></p>

これは HTML の構造として NG 。

見出しは段落の”外側”に置くのが正しい形です。

brタグだけで段落を作ろうとする

こんにちは。<br><br>
明日もよろしくお願いします。

こんにちは。<br><br>
明日もよろしくお願いします。

画面上は段落っぽく見えるのですが、意味としての”段落”が作られないので避けましょう。

正しくは

<p>こんにちは。</p>
<p>明日もよろしくお願いします。</p>

<p>こんにちは。</p>
<p>明日もよろしくお願いします。</p>

CSSで段落を読みやすくする（おまけ）

行間を少し広げるだけで、文章が一気に読みやすくなります

p {
  line-height: 1.6;
  color: #333;
}

p {
  line-height: 1.6;
  color: #333;
}

ここまでのまとめ

brタグで改行する方法

文章を書いていると、「ここだけ1行下にしたい」という場面がよくあります。

そんなときに使うのが br タグ。

br タグは「 line BReak （ラインブレイク）」の略で、“ただ1行改行するだけ”のシンプルなタグです。

brタグの書き方はとても簡単

br タグは開始・終了がない単独で使うタグです。

こんにちは。<br>
よろしくお願いします。

こんにちは。<br>
よろしくお願いします。

これだけで1行下に移動します。

“段落を分ける”のではなく”行を分ける”だけ

初心者が混乱しやすいポイントなので、p タグとの違いをもう一度まとめると

brタグがよく使われる場面

住所や短い情報を改行したいとき

<p>
  東京都〇〇区〇〇1-2-3<br>
  サンプルマンション 101
</p>

<p>
  東京都〇〇区〇〇1-2-3<br>
  サンプルマンション 101
</p>

挨拶文など、自然に1行空けたいとき

<p>
  こんにちは。<br>
  今日もよろしくお願いします。
</p>

<p>
  こんにちは。<br>
  今日もよろしくお願いします。
</p>

ボタン内の文字を2行にしたいとき（応用）

<button>お問い合わせ<br>はこちら</button>

<button>お問い合わせ<br>はこちら</button>

brタグを使いすぎると逆に読みづらくなる

br タグは便利ですが、段落の代わりに br を連打するのは NG です。

例

こんにちは。<br><br><br>
今日もよろしくお願いします。

こんにちは。<br><br><br>
今日もよろしくお願いします。

画面上は段落っぽく見えますが、HTML 的には”どこが段落かわからない”状態。

文章のまとまりを作りたいなら必ず p タグ を使いましょう。

brタグは閉じタグなしでOK？

はい、大丈夫です。

HTMLでは brタグは単体で書くのが基本です

<br>

<br>

XHTML では <br /> と書く時代もありましたが、今の HTML5 ではどちらでも表示されます。

<br> で OK です。

ここまでのまとめ

見出しと段落を使ってシンプルな記事ページを作ろう

ここまでで、

が使えるようになりました。

これらを組み合わせれば、とてもシンプルな記事ページが作れるようになります。

「 HTML で記事を書くってこういうことなんだ」と実感できる回です。

まずはHTMLだけで記事ページを組み立ててみよう

index.html に次のように書いてみてください

<h1>今日の散歩日記</h1>

<p>今日は久しぶりに近所の公園まで散歩に行きました。</p>

<h2>公園についた感想</h2>
<p>思ったより人が少なくて、ゆっくり歩くことができました。</p>

<h2>見かけたもの</h2>
<p>
  公園ではきれいな花が咲いていて、少しだけ写真も撮りました。<br>
  また来たいと思える、気持ちのいい場所でした。
</p>

<h1>今日の散歩日記</h1>

<p>今日は久しぶりに近所の公園まで散歩に行きました。</p>

<h2>公園についた感想</h2>
<p>思ったより人が少なくて、ゆっくり歩くことができました。</p>

<h2>見かけたもの</h2>
<p>
  公園ではきれいな花が咲いていて、少しだけ写真も撮りました。<br>
  また来たいと思える、気持ちのいい場所でした。
</p>

次にCSSで少しだけ読みやすくしてみよう

style.css に次のコードを追加します

body {
  font-family: sans-serif;
  line-height: 1.7;
  color: #333;
  max-width: 700px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  font-size: 28px;
  margin-bottom: 20px;
}

h2 {
  margin-top: 30px;
  font-size: 22px;
  color: #444;
}

p {
  margin-bottom: 16px;
}

body {
  font-family: sans-serif;
  line-height: 1.7;
  color: #333;
  max-width: 700px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  font-size: 28px;
  margin-bottom: 20px;
}

h2 {
  margin-top: 30px;
  font-size: 22px;
  color: #444;
}

p {
  margin-bottom: 16px;
}

ブラウザで見てみよう

index.html を開くと……

シンプルなのに読みやすい記事ページが完成しています。

“見出し → 説明文 → 見出し → 説明文”という構造がとても自然に見えるはずです。

HTMLだけのやつとCSSを追加したやつの比較

左が HTML だけのやつで右が CSS を追加したやつです。

よくあるつまずきポイント

少し変えるだけで記事の雰囲気が変わる（アレンジ自由）

など、ちょっと変えるだけでページの印象が変わります。

h2 {
  border-bottom: 2px solid #eee;
  padding-bottom: 4px;
}

h2 {
  border-bottom: 2px solid #eee;
  padding-bottom: 4px;
}

こんな風に線を入れるだけでも整理された記事に見えます。

ここまでのまとめ

今日できたこと＆次のステップ

この章では、見出しタグ（ h タグ）と段落タグ（ p タグ）を中心に、 HTML で文章を書くための基本をしっかり身につけました。

「ページの構造が少しずつ理解できてきた！」と感じられたら、それだけでも大きな一歩です。

文章の”タイトル → 中見出し → 説明文”という構造が、 HTML でも同じように作れる、という感覚がつかめていれば OK です。

確認問題

ページのタイトルに使うべきタグはどれ？

次の文章を正しく段落にしたいとき、正しい書き方はどれ？

<!--A-->
<p>今日はいい天気です。<br>明日は雨かもしれません。</p>
<!--B-->
<p>今日はいい天気です。</p>
<p>明日は雨かもしれません。</p>

<!--A-->
<p>今日はいい天気です。<br>明日は雨かもしれません。</p>
<!--B-->
<p>今日はいい天気です。</p>
<p>明日は雨かもしれません。</p>

文章の途中だけ1行下にしたいときに使うタグは？

次は”強調・装飾（strong・b・em・i）”に進もう

次の章では、 strong / b / em / i の違いなど、”文章を装飾したり強調したりするタグ”を扱っていきます。

といった、文章表現がグッと豊かになる内容です。

ここまでの理解で次に進む準備はバッチリなので、この調子で一緒に進めていきましょう！

前の記事

前の記事

【1-7】HTML・CSSでできることを1分で体験！実践ミニレッスン集

2025年12月6日

次の記事

準備中