HTMLで改行する方法は？pタグ・brタグの使い方＆注意点を徹底解説！

HTMLで改行する方法には「pタグ」や「brタグ」があります。

これらのタグは使い方や役割が異なるため、理解したうえで使い分けることが大切です。

この記事では、HTMLでの改行方法と注意点について、初心者の方にもわかりやすく解説します。

HTMLで改行するタグは2種類

HTMLで改行するタグは、主に<p>タグと<br>タグの2種類です。

それぞれのタグの役割や目的を解説します。

<p>タグは「段落タグ」

<p>タグとは「paragraph（段落）」の略で、段落をつくるブロック要素です。

文章中で話題が変わるときに、ひとまとまりの内容として読みやすくするために使います。

pタグで囲んだテキストは段落として扱われ、pタグの前後に自動的に改行が入ります。

<br>タグは「改行タグ」

<br>タグとは「line break（改行）」の略で、改行するタグです。

段落内で住所や歌詞など、改行の必要があるときに使います。

brタグを挿入すると、タグの直前に改行が入ります。

pタグとbrタグの違い

pタグは、文章の流れをわかりやすくするのが目的のため、デバイスの幅にあわせて自動的に改行されます。

一方、brタグは指定した位置で強制的に改行するため、スマホで見ると不自然な位置で改行されてしまうことがあります。

このような構造上の理由から、HTMLではpタグの使用を推奨しています。

HTMLで改行する方法

HTMLで、pタグとbrタグを使って改行する方法を解説します。

pタグでの改行方法

pタグで改行する方法は、改行したい文字を開始タグ<p>と終了タグ</p>で囲みます。

たとえば、次のように書くと、

ブラウザ上では以下のように表示されます。

brタグでの改行方法

brタグで改行する方法は、改行したいテキストの後ろに<br>タグを入れます。

終了タグは不要です。

たとえば、次のように書くと、

ブラウザ上では以下のように表示されます。

HTMLで改行するときの注意点

HTMLで改行すること自体、SEOには影響しません。

しかし、不適切な使い方によってWebサイトに間接的な悪影響を及ぼすことがあるため、注意が必要です。

ここでは、HTMLで改行タグを使うときの注意点をお伝えします。

brタグを段落に使用しない

手書きのテキストであれば、改行をして段落分けすることもあるかもしれません。

しかし、HTMLでは段落の代わりにbrタグを使うのは不適切です。

brタグは改行目的のタグであり、段落としては認識されません。

Googleのクローラビリティ低下の原因になるため、段落をつけたいときはpタグを使いましょう。

brタグやを連続で使用しない

行間をあけるために、brタグを連続で使うのは避けたほうがよいでしょう。

brタグを連続で使用すると、ソースコードが冗長になるだけでなく、Googleがコンテンツ内容を正しく理解できなくなる可能性もあります。

以下のような使い方は、見た目は整っていてもタグの使い方としては好ましくありません。

行間をあけたいときはCSSで調整しましょう。

brタグやpタグをデザイン調整に使用しない

デザイン調整のために、brタグやpタグを多用するのもおすすめできません。

画像やテキストの余白代わりとして改行タグを頻繁に使うと、ソースコードが見づらくなります。

HTMLでは本来の目的以外のタグを使う方法は、非推奨とされています。

デザインを整えるときは、CSSでスタイルを設定するとよいでしょう。

brタグはデバイスによって見た目が崩れる

brタグで改行すると、表示するデバイスによっては見た目が崩れることがあります。

PCとスマホでは画面サイズが異なるため、1行分の文字数がズレるからです。

ユーザーが読みにくいと感じればサイトの離脱率が上がるため、SEOに悪影響を及ぼしかねません。

レスポンシブ対応のWebページでは、基本的にはpタグを使用し、brタグは必要最低限におさえて使うとよいでしょう。

スラッシュ付きの<br />タグはバージョンによって異なる

brタグには、スラッシュありの<br />タグと、スラッシュなしの<br>タグがあります。

スラッシュを付けるかどうかは、HTMLのバージョンによって異なります。

現在は、HTML5やHTML Living standardが主流であり、brタグはスラッシュなしの使用が推奨されています。

まとめ

HTMLで改行するには、pタグとbrタグの2種類のタグがあります。

pタグは段落、brタグは改行を表します。

brタグはデバイスごとに見え方が異なることからHTMLで非推奨とされており、使用するときは注意が必要です。

また、brタグやpタグの頻繁な使用は避け、CSSと上手に使い分けましょう。