/*サーチコンソール*/ /*google adcense*/

改行と段落の違いとは?【HTML】

2020年1月22日

こんにちは、Kosei(https://twitter.com/pompom_stk)です。

改行を表すbr要素と段落を表すp要素はよく似ており、HTMLを始めたばかりの初心者はどっちを使えばいいのかわからなくなることもあります。

br要素は多用してしまうとSEO面としてマイナスになったり、見た目的にも悪くなったりしてしまいます。正直使いどころの少ない要素ですが、「こういうものもあるんだ」という知識として知っておきましょう。

今回は「br要素とp要素の違い」について解説していきます。

この記事の要点まとめ
改行を表すbr要素
br要素は「改行」を表す。
br要素には終了タグがない
br要素は終了タグがなく、改行したい場所で
を記入するだけでいい。
終了タグを必要としない空要素
brのように終了タグを書く必要のない要素のことを「空要素」という。
p要素とbr要素の違い
p要素は「段落を変更する要素」、br要素は「ただ改行するだけの要素」。
br要素はあまり使用するべきではない
br要素の多用は読みにくい
文章中、段落を変えるp要素でなく改行をするbr要素を多用してしまうと、読みにくい文章になってしまう。
br要素の間違えた使用例
br要素を連続で使用すること、見やすい場所で改行することは×。
br要素の使用例
br要素の正しい使用例を紹介。
br要素は使いすぎないようにしよう
br要素は使いどころの少ない要素だが、「こんなものもあるんだ」という知識として知っておこう。

改行を表すbr要素

今回は「改行」を表すbr要素について解説していくよ。

ヒナ
ヒナ

※この記事は主にbr要素について解説していきます。わかりやすいようにp要素と比較していきますので、もしp要素についてよく知らないという方はこちらの記事からご覧ください。

HTML編集で改行をするとき、文章を記入するときのように改行すると改行部分にスペースが表示されるだけで正しく改行されません。HTML編集上で改行するには、<br>というタグを記入する必要があります。

br要素」は「break」の略称で、ブラウザ上でテキスト・画像などを改行する際に使用されます。コードの書き方が少々特殊ですが、全く難しくありませんので安心してください。

br要素には終了タグがない

基本的なコード(例:p要素)は、『<p>テキスト</p>』のように、開始タグ(<p>)と終了タグ(</p>)にテキストや画像などを挟んで表示させます。これに対しbr要素は、終了タグを書く必要がありません。改行したい場所で<br>を記入する、それだけです。

下にコードを載せているので確認してください。1つ目はp要素を例にした、開始タグと終了タグに挟まれた基本的な要素です。2つ目では<br>を記入すると改行されること、br要素には終了タグが必要ないことを確認してください。3つ目ではHTML編集において改行するとどうなるのかを確認してください。

※画面サイズによっては3つめがHTML上で改行した場所で改行されているかもしれません。その場合は中央付近にある「0.5×」を押してください。

※CodePenの使い方がわからない方はこちら

See the Pen XWJROpy by Kosei@SplaTech (@pompom_stk) on CodePen.

ハリボー
ハリボー

HTMLの前のバージョンでは、「<br/>」と書いていたらしいよ。

終了タグを必要としない空要素

brタグは記入すると改行されること、終了タグが必要ないということが確認できましたか?このような「終了タグを必要としない」要素のことを「空要素(からようそ)」と呼びます。空要素はbrの他にも、画像を表示させる「img要素」、入力欄を表示させる「input要素」などがあります。

空要素とは「内容のない要素」というもので、そのタグ単体で完結します。

p要素などの終了タグのある通常の要素は、それぞれの要素の中にテキストや他の要素が入ります。しかしbrやimgなど終了タグのない要素は、中にテキストや他の要素を入れることができません。

通常の要素と空要素と違い

p要素とbr要素の違い

ハリボー
ハリボー

なんだかp要素とbr要素の違いがよくわかんない。

簡単に言うとp要素は「段落」、br要素は「改行」を表すよ。

ヒナ
ヒナ

僕もそうでしたが、HTMLを始めたばかりの初心者は「br要素」と「p要素」がよくわからなくなります。どちらも改行するもので、どう使い分けたらいいのかがわからないという人も多いと思います。

見た目上の違いとしては、br要素はただ改行するだけ、p要素は文章と文章の間に空白ができる(空白の有無・幅はCSSで変更可能)ことです。意味の違いとして、br要素は見た目の通り「ただ改行するだけ」、p要素は「段落を変更する」です。

このp要素とbr要素の違いを、箱に入った高級チョコレートに例えてみます。

p要素とbr要素の違い
ハリボー
ハリボー

チョコレート食べたい。

br要素はあまり使用するべきでない

br要素の多用は読みにくい

ここではあえて、改行にp要素ではなくbr要素を使っていきます。

br要素を多用すると、見た目が読みにくい文章になってしまいます。文章において改行をするタイミングは基本的に「主張やシーンが変わるとき」ですが、わざわざbr要素を使う必要がありません。
一つだけbr要素を使うメリットをあげるとすると、終了タグを書く必要がないということくらいです。
この文章を見ればわかると思いますが、段落を変えるとき、空白がないと読みづらい文章になってしまいます。そういった理由から、特別な理由がない限りはbr要素よりもp要素を使うことをおすすめします。
もしp要素を使うことでできる段落間の空白が嫌なら、CSSで空白部分の幅を調整・無くすこともできます。

br要素の間違えた使用例

上の文章で、p要素でなくbr要素で構成された文章は読みにくいことがわかったでしょうか。上の文章はまだ短いので良いですが、これが1記事文なると5〜10倍くらいの文章量になります。

そうなるとやはり、文章と文章の間に空白が欲しくなります。そこでp要素を使えばいいのですが、下のようにbrタグを連続で使用することでも空白はできます。ですが、このやり方はおすすめしません。br要素はあくまでも「改行」をするものです。段落分けはp要素を使うようにしてください。

このように本来の使用目的と異なる使い方をしてしまうと、SEO(検索エンジンに上位表示させるテクニック)的にもよくありません。

See the Pen abzwWVM by Kosei@SplaTech (@pompom_stk) on CodePen.

もう一つの間違えた使用例として、「ここで改行した方が見やすいから改行しよう」と思い、不用意に改行することです。確かに文章的に中途半端な場所で改行されるより、キリの良い場所で改行された方が見やすく思います。

しかし注意する点が、「1行に表示される文字数は記事を見る画面サイズ・文字サイズによって異なる」ことです。イメージがつくにくいかもしれないので、下の例を見てみてください。

See the Pen yLyXPQB by Kosei@SplaTech (@pompom_stk) on CodePen.

多分今、上の文章はおかしな場所で改行されていませんか?そこで真ん中下の「0.5×」もしくは「0.25×」というボタンを押してみてください。すると文字サイズが小さくなり、キリの良い場所で改行されたと思います。

このように表示する画面サイズや文字サイズによって、1行に表示される文字数は異なります。上の例のように、見やすいようにと文章の途中で改行してしまうと、逆に見やすい文章になってしまいますので注意しましょう。

br要素の使用例

あまり使えないならbr要素っていらなくない?」と思ったかもしれません。ですので、br要素の正しい使用例をご紹介します。

See the Pen bGNRYjQ by Kosei@SplaTech (@pompom_stk) on CodePen.

このようにリストのようなものを作るときには、改行をして表示させることができます。文章の頭に数字を表示する場合は、「li要素(リスト)」と呼ばれるものをを使う方が望ましいですが、上のように特に順番も関係なくただ改行すればいいだけの場合はbr要素が使えます。liについてはまた別記事で説明しますが、ここでは深く考えなくて大丈夫です。

その他にもいろいろな使い方があると思いますが、僕はこれくらしか使うことがありません。もっと言うと上のような場合はリストを使うので、ほとんど使っていません。もし良い使い方を知っている人がいたら、ぜひ教えてください。

br要素は使いすぎないようにしよう

ハリボー
ハリボー

あまり使わないならbr要素は覚えなくていいの?

「こんなものもあるんだなー」くらいの知識としては知っておいてほしいかな。

ヒナ
ヒナ

br要素の使い方がわかりましたか?正直言ってbr要素は使いどころの少ない要素です。段落分けをするならp要素を使い、リストを作るならli要素で作成することもできます。

むしろ使いすぎてしまうと、SEO面でマイナスになってしまったり、見た目も逆に悪くなったりしてしまいます。記事の最初でも言ったとおり、「こういうものもあるんだ」という知識を持つくらいにしておいて、極力別のもので代用することをおすすめします。