改行と区切り線

HTMLを書いていて、あれ？と思うことがあります。エディタで改行しても、画面では改行されないのです。HTMLは、文章の中の改行やすき間を「ひとつの空白」にまとめてしまうから。試しに、こう書いてみましょう。

<p>おはよう
    こんにちは
        こんばんは</p>

エディタでは3行に見えても、ブラウザでは「おはよう こんにちは こんばんは」と、すべて1行・1つの空白でつながって表示されます。改行もインデントの空白も、HTMLにとっては「区切り」ではないのです。そんなときに使う、小さな2つのタグを覚えましょう。

<br> で改行する

文の途中で「ここで行を変えたい」ところに <br> を置きます。

<p>〒100-0001<br>東京都千代田区1-1-1<br>ぴよビル3F</p>

住所や俳句のように、1つのまとまりの中で行だけ変えたいとき。それが <br> の出番です。俳句なら、こう書けます。

<p>古池や<br>蛙飛び込む<br>水の音</p>

3行の俳句が、<p> はひとつのまま、<br> のところだけで改行されます。「別々の段落」ではなく「1つのまとまりの中の改行」だということが、タグの使い分けにも表れています。

<hr> で区切り線を引く

話題がガラッと変わるところに、横一本の線を引けるのが <hr> です。

<h2>今日のできごと</h2>
<p>朝はいい天気でした。</p>
<hr>
<h2>あしたの予定</h2>
<p>公園にいきます。</p>

「ここで話が切り替わりますよ」という区切りを、線で見せられます。

このレッスンのまとめ

1. <br> は文の途中で改行する（終了タグなし）
2. <hr> は話題の切れ目に区切り線を引く（終了タグなし）
3. すき間あけの <br> 連打はしない——余白はあとでCSSで