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要素について解説していきます。わかりやすいように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.ハリボー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要素の違いを、箱に入った高級チョコレートに例えてみます。ハリボーチョコレート食べたい。br要素はあまり使用するべきでないbr要素の多用は読みにくいここではあえて、改行にp要素ではなくbr要素を使っていきます。br要素を多用すると、見た目が読みにくい文章になってしまいます。文章において改行をするタイミングは基本的に「主張やシーンが変わるとき」ですが、わざわざbr要素を使う必要がありません。一つだけbr要素を使うメリットをあげるとすると、終了タグを書く必要がないということくらいです。この文章を見ればわかると思いますが、段落を変えるとき、空白がないと読みづらい文章になってしまいます。いった理由から、特別な理由がない限りはbr要素よりもp要素を使うことをおすすめします。p要素を使うことでできる段落間の空白が嫌なら、CSSで空白部分の幅を調整・無くすこともできます。上の文章で、p要素でなくbr要素で構成された文章は読みにくいことがわかったでしょうか。上の文章はまだ短いので良いですが、これが1記事文なると5〜10倍くらいの文章量になります。なるとやはり、文章と文章の間に空白が欲しくなります。そこでp要素を使えばいいのですが、下のようにbrタグを連続で使用することでも空白はできます。このやり方はおすすめしません。br要素はあくまでも「改行」をするものです。段落分けはp要素を使うようにしてください。このように本来の使用目的と異なる使い方をしてしまうと、SEO(検索エンジンに上位表示させるテクニック)的にもよくありません。CodePen.もう一つの間違えた使用例として、「ここで改行した方が見やすいから改行しよう」と思い、不用意に改行することです。確かに文章的に中途半端な場所で改行されるより、キリの良い場所で改行された方が見やすく思います。注意する点が、「1行に表示される文字数は記事を見る画面サイズ・文字サイズによって異なる」ことです。イメージがつくにくいかもしれないので、下の例を見てみてください。CodePen.多分今、上の文章はおかしな場所で改行されていませんか?そこで真ん中下の「0.5×」もしくは「0.25×」というボタンを押してみてください。すると文字サイズが小さくなり、キリの良い場所で改行されたと思います。このように表示する画面サイズや文字サイズによって、1行に表示される文字数は異なります。上の例のように、見やすいようにと文章の途中で改行してしまうと、逆に見やすい文章になってしまいますので注意しましょう。「あまり使えないならbr要素っていらなくない?」と思ったかもしれません。br要素の正しい使用例をご紹介します。CodePen.このようにリストのようなものを作るときには、改行をして表示させることができます。文章の頭に数字を表示する場合は、「li要素(リスト)」と呼ばれるものをを使う方が望ましいですが、上のように特に順番も関係なくただ改行すればいいだけの場合はbr要素が使えます。liについてはまた別記事で説明しますが、ここでは深く考えなくて大丈夫です。その他にもいろいろな使い方があると思いますが、僕はこれくらしか使うことがありません。言うと上のような場合はリストを使うので、ほとんど使っていません。良い使い方を知っている人がいたら、ぜひ教えてください。br要素は使いすぎないようにしようハリボーあまり使わないならbr要素は覚えなくていいの?「こんなものもあるんだなー」くらいの知識としては知っておいてほしいかな。ヒナbr要素の使い方がわかりましたか?正直言ってbr要素は使いどころの少ない要素です。段落分けをするならp要素を使い、リストを作るならli要素で作成することもできます。使いすぎてしまうと、SEO面でマイナスになってしまったり、見た目も逆に悪くなったりしてしまいます。記事の最初でも言ったとおり、「こういうものもあるんだ」という知識を持つくらいにしておいて、極力別のもので代用することをおすすめします。pompom-stk関連記事p要素、div要素、span要素の違いを初心者向けに解説【HTML】p要素、div要素、span要素の違いについて初心者向けに解説した記事です。...初心者向け段落の作成方法【HTML】ブログやWebサイトを作成する上で、段落は必須です。...初心者向けテーブル(表)の作成方法/【HTML】テーブルの作成方法を初心者向けに解説した記事です。...タグ中の要素、属性とは?HTMLの基本的な書式こんにちは、Kosei()です。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。