HTML・文章にひと工夫

改行と区切り線

「ここで改行したい」「話題の切れ目に線を引きたい」。そんな小さな整えに使うbrとhr。はさまない“単独タグ”のはじめまして。

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

<br> で改行する

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

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

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

<hr> で区切り線を引く

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

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

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

このレッスンのまとめ

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

:::

やってみよう:見出しを2行に

しまちゃんページのいちばん上の <h1> を「あいさつ」にして、2行に改行しましょう。「こんにちは、」のあとに <br> を置きます。

<h1>こんにちは、<br>しまちゃんです。</h1>

<br> のところで行が変わり、「こんにちは、」と「しまちゃんです。」が2行に。名前だけの見出しが、ぐっとあいさつらしくなりました。

ブラウザ表示。大きな見出しが「こんにちは、」「しまちゃんです。」の2行に分かれて表示されている
<br> を入れたところだけで行が変わります。