HTMLで文章を書くときによく使う hr タグと br タグは、どちらも終了タグのないタグですが、意味はまったく違います。この記事では、それぞれの役割と、余白や飾りに使わない理由、WordPressでの入れ方をまとめます。
2つのタグの役割
| タグ | 名前の由来 | 意味 | ブラウザでの見た目 |
|---|---|---|---|
hr | horizontal rule（水平の線） | 段落と段落の間の、話題の切れ目 | 横線 |
br | break（区切る） | 段落の中の改行 | 次の行から続きが始まる |
hr：話題の切れ目
hr は、画面では横線になりますが、線を引くためのタグではなく、「ここで話題が変わる」という区切りを表します。
<p>ここまでが前回のあらすじや、導入部分のテキストです。</p>
<hr> <p>ここから本題の、具体的な実装方法についての解説が始まります。</p>
小説で場面が変わるときの空き行や、長い文章の中で話題が変わるところなどが、hr を使う場面です。章や節が変わるところでは、hr ではなく見出し（h2 など）を使います（「hタグ（見出し）の基本」）。見出しを付けるほどではないけれど、話題は変わる、というときの区切りが hr です。
br：段落の中の改行
住所や詩のように、同じ段落の中で、改行の位置に意味があるときに使います。
<p>
〒123-4567<br>
東京都渋谷区〇〇 1-2-3<br>
〇〇ビル 4階
</p>
HTMLでは、コードの中で改行しても、画面では改行されません（空白1つとして扱われます）。画面で改行したい位置に br を書きます。
ふつうの文章の途中で、画面での見え方を整えるために br を入れるのはおすすめしません。パソコンでちょうどよい位置で改行しても、画面の狭いスマホでは中途半端な位置で改行されて、かえって読みにくくなります。話が変わるなら、br ではなく段落（p）を分けます（「pタグとdivタグの違い」）。
余白や飾りには使わない
余白を空けたいときに br を重ねない
<!-- よくない例：間を空けたくて br を重ねている -->
<p>文章の終わりです。</p> <br><br><br> <p>次の文章です。</p>br を重ねると、空き方が画面の幅や文字の大きさで変わり、あとからまとめて調整することもできません。上下の余白は、CSSの margin や padding で指定します。
飾り線だけなら hr を使わない
話は続いているのに、デザインとして線を入れたいだけなら、hr ではなくCSSの border で線を引きます。たとえば見出しの下に線を引きたいときは、見出しに border-bottom を指定します。
h2 {
border-bottom: 2px solid #ccc; /* 見出しの下に線 */
padding-bottom: 4px;
}終了タグは書かない
hr と br は、中に文字を入れない「空要素」です。</hr> や </br> のような終了タグは書きません。古いXHTMLの <br /> のようにスラッシュを付けた書き方も、今のHTMLではいりませんが、書いてあっても問題なく動きます。
WordPressでは
| したいこと | 操作 | HTML |
|---|---|---|
| 新しい段落にする | Enter | 新しい p |
| 段落の中で改行する | Shift＋Enter | br |
| 話題の切れ目に線を入れる | 「区切り」ブロック | hr |
| 余白を空ける | 「スペーサー」ブロック、またはブロックの余白の設定 | 高さを指定した div、またはCSSの余白 |
住所などを書くときに Enter を押すと、行ごとに別の段落になって間が空きます。同じ段落の中で改行したいときは Shift＋Enter を使います。
HTML全体の基本は「HTMLの基本｜タグの書き方とよく使う5つのタグ」、ページ全体の区切り方は「ページの区切り方｜header・nav・main・aside・footer」で紹介しています。
まとめ
hrは段落の間の話題の切れ目。章が変わるときは見出しを使うbrは住所や詩など、改行の位置に意味があるときの段落の中の改行。話が変わるなら段落を分ける- 余白は
brを重ねずにCSSで。飾り線もCSSのborderで - どちらも終了タグは書かない
- WordPressでは Shift＋Enter が
br、「区切り」ブロックがhr
コメント