HTML 段落

HTMLにおける段落は、テキストのブロックを定義するために使用されます。

1. HTML 段落の基本

HTMLの <p> 要素は段落（Paragraph）を定義します。

段落は常に新しい行から始まり、ブラウザは自動的に段落の前後に一定の余白（マージン）を追加します。

<p>これは段落です。</p>
<p>これは別の段落です。</p>

2. HTML の表示仕様

HTMLがどのように表示されるかを正確に予測することはできません。画面が大きくても小さくても、あるいはウィンドウのサイズが変更されても、結果は変わる可能性があります。

HTMLでは、ソースコード内に余分なスペースや空行を追加しても、表示結果を変えることはできません。

ブラウザは、ページがレンダリングされる際に、連続するスペースや空行を自動的に削除し、1つのスペースとして処理します。

<p>
この段落は
ソースコード内で
多くの行に
分かれていますが、ブラウザは
これを無視します。
</p>

<p>
この段落は     ソースコード内で     多くのスペースを     含んでいますが、ブラウザは     これを無視します。
</p>

3. HTML 改行 (Line Breaks)

HTMLの <br> 要素は改行（Line Break）を定義します。

新しい段落を開始せずに改行したい場合は、<br> タグを使用します。

<p>これは<br>改行を含む<br>段落です。</p>

<br> タグは空要素（Empty Element）であるため、終了タグを持ちません。

4. ポエム問題 (The Poem Problem)

以下のような詩を表示しようとすると、問題が発生します。

<p>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</p>

ブラウザはこれを1行で表示してしまいます。

5. HTML <pre> 要素

HTMLの <pre> 要素は、整形済みテキスト（Preformatted text）を定義します。

<pre> 要素内のテキストは、通常は固定幅フォント（Courierなど）で表示され、ソースコード内のスペースと改行の両方がそのまま保持されます。

<pre>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</pre>

6. まとめ

今回紹介したタグの役割は以下の通りです。