HTML 入門

HTML pタグ（段落）とbrタグ（改行）

HTMLでは、<p> タグを使用して「段落」を定義します。
<p> タグを正しく使い、改行を適切にコントロールできるようになると、Webページ上でテキストを効果的に表示できるようになります。

この記事では、<p> タグと <br> タグの使い分け、属性、そして現場で役立つベストプラクティスについて深掘りしていきます。

1. <p> タグ：段落（Paragraph）を定義する

HTMLにおける <p> タグは、ひとつの段落を定義するためのものです。

  • ブロックレベル要素（Block-level element）： これはブロックレベル要素であり、常に新しい行から始まり、利用可能な全幅を占有します。
  • 自動スペーシング： ブラウザは各 <p> 要素の前後に自動的に空白（マージン / margin）を追加し、段落同士が視覚的に区切られるように調整します。

1.1 基本的な使い方

最もシンプルな方法は、テキストを <p> 開始タグと </p> 終了タグで囲むことです。

<p>これは最初の段落です。上下にマージンが確保され、ページ上の他の要素と区別されます。</p>
<p>これは2番目の段落です。ブラウザが自動的に段落間の間隔を空けていることに注目してください。</p>

1.2 段落の属性（モダンHTML5）

<p> タグ自体に固有の特殊な属性はありませんが、すべてのHTML要素で共通して使えるグローバル属性をサポートしています。

  • class： CSSスタイルを適用するために使用します。
  • id： 一意の識別子（ID）を付与し、CSSやJavaScriptでの操作に使用します。
  • style： インラインCSSを直接記述します（通常は非推奨。外部スタイルシートを使いましょう）。
  • title： ユーザーがマウスを段落に乗せたときに表示されるツールチップ（Tooltip）を設定します。
<p id="intro-paragraph" class="highlighted-text">
    これは一意のIDとCSSクラスを持つ、導入部分の段落です。
</p>
<p title="これは会社のミッションに関する段落です。">
    私たちのミッションは、お客様に高品質な製品とサービスを提供することです。
</p>

1.3 ネスト（入れ子）の禁止

重要： <p> タグの中に別の <p> タグをネストさせることはできません。

HTMLの仕様ではこれが禁止されています。もし無理にネストさせようとすると、ブラウザがコードを自動的に「修正」しようとして、意図しない表示結果を招くことがよくあります。

誤った例

<p>この段落の中に別の <p>段落</p> が含まれています。</p>

正しい方法： 段落内の一部だけスタイルを変えたい場合は、<span> タグなどのインライン要素や、他のセマンティックな要素を使用しましょう。

<p>この段落には、別のスタイルを適用した <span>テキスト</span> が含まれています。</p>

2. 改行：<br> タグ

<br> タグは、テキスト内に単純な改行（Line Break）を挿入するために使用します。

  • 空要素（Empty element）： 終了タグはありません（</br> と書く必要はありません）。
  • 原則： セマンティック（意味論的）に改行が必要な場合にのみ使用し、単に見た目のスペースを作るために使ってはいけません。

2.1 どんな時に <br> を使うべきか？

<br> の使用が適しているのは、「改行そのものがコンテンツの一部である」場合です。

  • 住所： 通り、市区町村、郵便番号を区切る。
  • 詩： 詩人の意図したフレーズの区切りを維持する。
  • 歌詞： Aメロやサビの構造を維持する。

例：住所

<p>Adventure Awaits<br>メインストリート 123号<br>東京都千代田区 100-0001</p>

例：詩

<p>
  道（著：ロバート・フロスト）<br>
  黄色い森の中で道が二つに分かれていた<br>
  残念ながら両方の道を行くことはできない<br>
  私は長い間そこに立ち尽くし<br>
  一方の道を見渡せる限り遠くまで眺めた<br>
  その先が茂みの中に消えていくまで。
</p>

2.2 どんな時に <br> を使ってはいけないか？

単に「段落の間をもっと空けたい」といった視覚的なフォーマット目的で <br> を連打してはいけません。それは CSS（margin や padding） の仕事です。

<br> を乱用すると、HTMLのセマンティクスが不明確になり、メンテナンス性も低下します。

誤った使い方（スペース調整用）：

<p>これは最初の段落です。</p><br><br>
<p>これは2番目の段落です。</p>

正しい使い方（CSSで余白をコントロール）：

<head>
<style>
  p {
    margin-bottom: 20px; /* 各段落の下に20ピクセルのマージンを追加 */
  }
</style>
</head>
<body>
  <p>これは最初の段落です。</p>
  <p>これは2番目の段落です。</p>
</body>

2.3 <br> とアクセシビリティ

<br> タグの乱用は、アクセシビリティ（Accessibility）に悪影響を及ぼします。

スクリーンリーダーは、連続した複数の <br> タグを「大きな一時停止」として解釈することがあり、視覚障害を持つユーザーの読書リズムを乱す可能性があります。レイアウトやデザインに関しては、常にセマンティックなHTMLとCSSを優先して使用しましょう。

3. まとめ

見出しと同様、段落もただのテキストの塊ではありません。構造化されたWebページを作るための重要なコンポーネントです。

プロの開発者として、以下の黄金律を常に意識しましょう：

  • 論理的な区切りには <p>。
  • コンテンツ自体の改行には <br>。
  • 見た目の余白には CSS。

これらを守るだけで、あなたのコードの品質は格段に向上します。