基本知識 2026年7月2日

【HTML基礎講座第2回】見出しと段落：テキストを構造化して美しい文書を作る

HTML基礎講座全10回（第2回）

見出しと段落：テキストを構造化して美しい文書を作る

第2回では、ウェブサイトのコンテンツの根幹である「テキスト情報」をブラウザや検索エンジンに正しく伝えるための、見出しと段落のマークアップ方法を詳しく解説します。

📌 講座ロードマップ一覧（クリックで移動）

第1回第2回第3回第4回第5回第6回第7回第8回第9回第10回

1. 見出しタグ（h1〜h6）の役割とルール

新聞や本に「タイトル」や「章の見出し」があるように、ウェブページにも構造化された見出しが必要です。HTMLでは見出しを表すために、h1、h2、h3、h4、h5、h6 要素を使用します。「h」は Heading（見出し）の略です。

見出しには重要度（レベル）に応じて1から6の数字が割り当てられており、数字が小さいほど重要度の高い（大きな）見出しになります。

🚨 見出し使用の絶対ルール

ルール①：順番を守る（数字を飛ばさない）
h1の次はh2、h2の次はh3と、順番に入れ子構造を作ります。「h1の直後にh3を使う」といった階層のジャンプは、構造が崩れるためNGです。
ルール②：h1は原則1ページに1回
h1はページ全体のタイトル（最も重要な大見出し）です。SEO（検索エンジン最適化）や文書構造の観点から、1つのページに1回だけ使用するのが標準的です。
ルール③：見た目の調整目的で見出しを使わない
「文字を大きく太くしたいから」という理由だけでh3などの見出しタグを使うのは絶対にやめましょう。見た目のサイズ調整はCSSの役割です。

2. 段落タグ（p）と改行タグ（br）の正しい使い分け

一般的な文章テキストは、p要素（Paragraph = 段落）で囲みます。文章のまとまりごとにpタグで囲むことで、文章を論理的に区切ることができます。

一方で、段落の途中で単に文字を折り返したい（改行したい）場合には、br要素（Break = 改行）を使用します。

HTMLコード例

<p>
    これは第1の段落です。<br>
    ここで改行していますが、同じ段落の中です。
</p>
<p>
    ここから第2の段落が始まります。
</p>

⚠️ brタグの乱用に注意！

「段落と段落の間の余白を広くしたい」という理由で、空の `

` を連続して打つのはマークアップの作法として大きな間違いです。余白（マージン）の設定は、CSSで行うのがWeb制作の鉄則です。brタグはあくまで「詩の改行」や「住所の折り返し」など、意味的に改行が必要な最小限の場所でのみ使いましょう。

3. テキストの強調とその他の装飾タグ

文章の中で特定の単語やフレーズを強調したい場合は、以下のタグを使い分けます。

<strong> タグ: 「極めて重要であること」を示します。ブラウザでは一般的に太字で表示されます。検索エンジンのクローラーも重要キーワードとして認識します。
<em> タグ: 「話し言葉における強調（アクセント）」を示します（Emphasisの略）。ブラウザでは斜体（イタリック体）で表示されることが多いです。
<hr> タグ: テーマの切り替わりを示す水平の区切り線を引きます。終了タグのない「空要素」です。

4. テキストタグを組み合わせた実践コード

見出し、段落、強調、区切り線を組み合わせた、綺麗な文書構造のマークアップ実例です。

lesson2-sample.html

<h1>プログラミング学習の始め方</h1>
<p>IT技術の発展に伴い、プログラミングを学ぶ人が増えています。</p>

<hr>

<h2>ステップ1：学習言語を選ぶ</h2>
<p>
    Webサイトを作りたいなら、まずは<strong>HTMLとCSS</strong>から学習を始めるのが最もおすすめです。<br>
    これらはすべてのWebデザインの基盤となります。
</p>