HTMLで改行したいときのタグの使い方について、悩んではいませんか？

実際に改行タグを利用してみても、これで本当に合っているのか気になりますよね。

今回は、HTMLの改行タグについて、きっちり学びたい、という方のために、

以上の項目に沿って、解説していきます。

この記事を読むことで、HTMLの改行タグの正確な使い方が分かるようになりますよ。

ぜひ最後まで読んでくださいね！

HTML文書内の改行について

HTML文書内で改行しても、実際のブラウザ上の表示では、1文字分のスペースとしてまとめられるだけで、反映はされません。

ブラウザでも改行させるためには、改行するためのタグを使用する必要があります。

使うタグは、pタグ、もしくはbrタグです。

preタグを使って改行を反映することもできますが、自動改行されなくなり、スマホで見づらくなるリスクがあるため、あまり推奨できません。

同じように、CSSのwhite-spaceプロパティの値を「pre」にする方法も、特別な理由がない限り、使わない方が良いでしょう。

pタグとbrタグは何が違うの？

HTMLの改行には、pタグとbrタグを使うということが分かりましたね。

では、両者には、どのような違いがあるのでしょうか？

それぞれのタグの違いには、

という、主に3つの違いがあります。

それぞれ説明していきますね。

ブラウザでの表示の違い

pタグは、文章全体を区切ってひとまとまりの段落を作り、読みやすくする機能があります。

pタグで囲まれた要素は、ブロック要素になります。

ブロック要素は、他の要素が縦に並ぶため、強制的に改行された表示になります。

同じようにh要素やdiv要素もブロック要素なので、改行にはなりますね。

ですが、この2つの要素は、今回のような改行目的で連続して使用するものではないので注意しましょう。

brタグは、終了タグがなく、brの部分で改行させるためのタグです。

文章の余白を調整する方法の違い

改行したときに、行間に余白があった方が読みやすくなりますよね。

CSSで指定することで、余白をとることができます。

pタグは、ブロック要素を構成するため、marginやpaddingなどで余白をとることができます。

brタグでの改行では、このような余白はとれないため、line-heightで文章の高さを調整する必要があります。

「pタグでは、要素の余白を調整」、「brタグでは、文章の高さを調整」というイメージですね。

検索エンジンの判断の違い

pタグとbrタグのどちらを使うかで、検索エンジンの文章の判断が異なります。

Googleなどの検索エンジンは、pタグで囲まれた要素をひとまとまりの文章として受け取るため、要素の中身は意味の通ったものにする必要があります。

brタグは、改行という意味しか持たないため、まとまった文章の中で改行ができます。

pタグを推奨する理由

HTMLでは、brタグは非推奨とされているため、どうしても必要な場合以外には使わないことをおすすめします。

CSSでも設定可能な範囲が限られ、ブラウザ表示が綺麗にできない場合があります。

例えば、横幅が狭いスマホ画面では、自動改行以外の改行があると、表示がずれてしまい読みにくくなってしまいます。

brタグを使いたいときの注意点

5・7・5の俳句や詩など、コンテンツによっては、文章の途中で改行をした方が見やすくなる場合があるでしょう。

改行した場所が、意味の通った文章ではなくなってしまうため、この場合、pタグは推奨されません。

こうしたときには、brタグで強制的に改行するのも1つの手段です。

brタグを使う場合の注意点として、

という2つを紹介します。

バージョンによってbrタグは異なる

HTMLは歴史の中で、タグの表記が変わることがあります。

brタグもその1つで、Webサイトの中には、<br>のほかに<br />が使われていることがあります。

<br />は、以前に開発されたXHTMLで使われていたbrタグです。

HTML4.01やHTML5では、<br>を使うことになっています。

現在、Webサイトの作成には、HTML5を用いることが推奨されているため、<br>を利用するようにしましょう。

改行タグは連続で使わない

brタグを連続で使用すると、空白の行ができた表示になります。

表示の調整ができて便利な気がしますが、このような使い方は、brタグの本来の使い方ではないので、おすすめはできません。

行の間に余白を作りたいのであれば、pタグとCSSを用いるのが正しい方法です。

brタグは改行のためだけに使いましょう。

検索エンジンも、brタグで表示を整えることを良しとしないため、SEOを考慮しても連続使用は避けた方がいいですね。

改行で連続brはNG！？HTMLで正しい空白行を入れる方法を解説

まとめ：HTMLの改行には、基本的にpタグを用いる

今回は、HTMLの改行について、pタグとbrタグの違いや使い方などを紹介しました。

基本的には、pタグで囲って改行することをおすすめします。

どうしてもbrタグを使いたいときに、注意すべき点についても説明しましたね。

Webサイトを作る上で、今回の記事が少しでも参考になれば幸いです。

＼プログラミングスクールを比較／