HTML: HTML段落

段落はウェブページでテキストを整理する最も基本的な方法です。一般的なテキストタグをマスターすると、コンテンツがより読みやすくなります。

1. 段落タグ <p>

<p> タグ（段落）は段落を定義するために使います。ブラウザは段落の前後に自動的にスペース（マージン）を追加し、段落間の自然な区切りを作ります。

複数の <p> 要素を順番に配置すると、記事の本文構造が形成されます。これはウェブ上で最も一般的なテキストの整理方法です ― ニュース記事、ブログ投稿、製品説明などはすべて段落で構成されています。

▶ サンプル

<p>これは最初の段落です。ブラウザは段落の前後に自動的にスペースを追加します。</p>
<p>これは2番目の段落で、最初の段落の直後に続きます。ページ上の段落は自然に区切られ、明確な読みやすいリズムが生まれます。</p>
<p>これは3番目の段落です。複数の段落を順番に並べることで、完全な記事が構成されます。</p>

2. 改行と水平線

段落タグに加えて、HTMLにはテキストレイアウトに関連する2つの空タグがあります：<br> と <hr> です。

(1) 改行タグ <br>

<br>（改行）はテキスト内での強制改行を表します。住所、詩、歌詞など、手動で改行位置を指定したいシーンに適しています。注意点： <br> は段落の間隔を作るためのものではありません ― 段落の間隔は <p> またはCSSで制御すべきです。

(2) 水平線 <hr>

<hr>（水平線）はページ上に水平線を描き、通常はテーマの区切りやセクションの区切りを示します。<br> と同様に、<hr> も空タグです。

▶ サンプル

<p>これは1行のテキストで、<br>これは同じ段落内の改行後のテキストです。</p>

<hr>

<p>区切線の上が前半、下が後半です。</p>

<p>住所の例：<br>
東京都千代田区<br>
丸の内1丁目<br>
〒100-0005</p>

3. HTML文字実体参照

HTMLでは、特定の文字が特別な意味を持っています（例：< と > はタグに使用されます）。これらの文字をそのままページに表示したい場合は、文字実体参照（HTMLエンティティとも呼ばれます）を使う必要があります。

よく使われる文字実体参照は以下の通りです。

なぜエスケープが必要か？ ブラウザがHTMLを解析するとき、< をタグの開始と見なすからです。<p> を直接書くと、ブラウザは段落タグを定義していると解釈し、「<p>」というテキストを表示しません。文字実体参照はブラウザに伝えます：この文字はタグ構文ではなく、単なるテキストです。

<p>文字実体参照を使って特殊記号を表示：</p>
<ul>
<li>小なり：&lt;（< を直接書くとタグと誤解される）</li>
<li>大なり：&gt;（> を直接書くとタグ終了と誤解される）</li>
<li>アンパサンド：HTML &amp; CSS（HTML & CSS と表示される）</li>
<li>著作権：Copyright &copy; 2024</li>
<li>改行しないスペース：Hello&nbsp;&nbsp;World（2つのスペース）</li>
</ul>

❓ よくある質問

📖 まとめ

• <p> は段落を定義。ブロックレベル要素で、ブラウザが前後に自動的にスペースを追加
• <br> は強制改行、<hr> は水平線を描く ― どちらも空タグ
• 文字実体参照は特殊文字を表示するために使う：<（小なり）、>（大なり）、&（アンパサンド）、 （改行しないスペース）
• 段落の間隔を作るために <br> を乱用しない ― CSSの margin を使う

📝 練習問題

1. テキストレイアウト練習： <p>、<br>、<hr> タグを使って短いテキストを作成してください。3つの段落、1つの住所（<br> で改行）、1つの区切り線を含めてください。
2. 文字実体参照練習： ページに次の内容を表示してください：「HTML uses <p> tags to define paragraphs, and the & symbol needs to be escaped with &amp;.」 （ヒント：ブラウザが実体そのものを表示し、それが表す文字を表示しないように、文字実体参照を正しくネストする必要があります。）

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

私たちについて