HTMLで改行するには？pタグとbrタグの使い方や注意点など徹底解説！

HTMLで改行するには、主にpタグやbrタグをマークアップします。
pタグとは、Paragraphの略で「段落」を意味するHTMLタグのことで、「段落タグ」とも呼ばれます。
brタグとは、テキスト文章の行を変える（改行する）ときに使うHTMLタグのことで、「改行タグ」とも呼ばれます。
これらのタグを使ってHTMLで改行することによる直接的なSEOへの影響はありません。

一方、HTMLで不適切な改行をすれば、ユーザビリティやクローラビリティの低下に繋がります。
具体的には、長い文章内容を区切るときにbrタグだけ使ったり、brタグを連続でマークアップすれば、文章の行間が詰まりすぎたり空きすぎます。
この場合、ユーザーが読みにくいテキスト文章になったり、クローラーに不親切なHTML構造となります。
結果、Googleに評価されづらくなるというわけです。

こうした良くない状況を回避する為に、HTMLで改行を適切に行って、見やすくわかりやすいコンテンツにしましょう。

この点踏まえて今回は、HTMLで改行する方法や注意点など中心に、初心者にもわかりやすくポイントをまとめて解説したいと思います。

HTMLで改行するタグとは？

HTMLで改行するタグは、主にpタグとbrタグがあります。

• pタグとは？
• brタグとは？

pタグとは？

pタグとは、Paragraphの略で「段落」を意味するHTMLタグのことで、「段落タグ」とも呼ばれます。

例えば、ブログ記事の文章内容で「さて本題に入るが…」のような主張やシーンが変わって新しい話題に移るときがあります。
このときに、基本的に段落を付けます。
段落を付ける為にHTML内の該当箇所に<p>をマークアップします。
このマークアップするHTMLタグが、pタグというわけです。

brタグとは？

brタグとは、テキスト文章の行を変える（改行する）ときに使うHTMLタグのことで、「改行タグ」とも呼ばれます。

例えば、ブログ記事の文章内容で「さて本題に入るが…」のような主張やシーンが変わるときがあります。
また、会話文を入れたり、「。」などのセンテンスで区切る、文章のリズムを作りたいときがあります。
これらのときに、基本的に改行します。
改行する為にHTML内の該当箇所に<br>をマークアップします。
このマークアップするHTMLタグが、brタグというわけです。

HTMLで改行するpタグとbrタグの違い

HTMLで改行するpタグとbrタグは、タグ自体に与えられた意味や目的が大きく違います。

例えば、pタグとは、文章全体を段落で区切って読みやすくするために使うHTMLタグのことです。
なので、改行ではなく段落を付けることが主目的です。
一方、brタグとは、テキスト文章の行を変える（改行する）ときに使うHTMLタグのことで、「改行タグ」とも呼ばれます。
なので、段落を付けることでなく改行のみが主目的です。
つまり、タグ自体に与えられた意味や目的が違うというわけです。

こうして、タグ自体に与えられた意味や目的が異なる点が、HTMLで改行するpタグとbrタグの大きな違いです。

HTMLで改行する方法

HTMLで改行するにはpタグやbrタグを使います。

• pタグの使い方
• brタグの使い方

pタグの使い方

pタグの使い方がいくつかあります。

• 新しい話題に移る（ストーリーを完結させる）ときに使う
• 時間軸の変化があるときに使う
• 文章同士の関連性が乏しいときに使う
• brタグ（改行タグ）と適宜併せて使う

新しい話題に移る（ストーリーを完結させる）ときに使う

pタグは、新しい話題に移る（ストーリーを完結させる）ときに使います。

例えば、長い物語を綴った文章があるとします。
こうした長い文章内では基本的にいくつかのシーンに分かれます。
このシーンが変わる部分で<p>をマークアップして段落を付けます。（※第一章や第二章など）
つまり、新しい話題に移る（ストーリーを完結させる）ときに使うというわけです。

こうして、新しい話題に移る（ストーリーを完結させる）ときに使うことが、pタグの使い方です。

時間軸の変化があるときに使う

pタグは、時間軸の変化があるときに使います。

例えば、「僕は第一志望の○○会社に入社後、一身上の都合により3か月で退職した。退職後、昔から興味のあったWebデザインの学校に約1年通って専門スキルを身に着けた。その専門スキルを武器に、いくつかWebデザインの関連会社の面接を受けて内定をもらうことができた。10年後、今もその内定をもらった会社で楽しく働いてる。」という文章があるとします。
この文章内で「10年後…」は年月の変化が大きいです。
この年月の変化が大きい部分で<p>をマークアップして段落を付けます。

つまり、時間軸の変化があるとき使うというわけです。

こうして、時間軸の変化があるときに使うことが、pタグの使い方です。

文章同士の関連性が乏しいときに使う

pタグは、現在の文章と次の文章の関連性が乏しいときに使います。

例えば、「私は猫を飼ってます。その猫は私の手のひらに乗るほど小さくて可愛らしいです。ちなみに犬は苦手です。とくに大きくて吠えやすい犬が苦手です。」というテキスト文章があります。
この文章内で「ちなみに犬は…」は、前の文章と関連性が下がってます。
この関連性が下がってる部分で<p>をマークアップして段落を付けます。

つまり、文章同士の関連性が乏しいとき使うというわけです。

こうして、文章同士の関連性が乏しいときに使うことが、pタグの使い方です。

brタグ（改行タグ）を適宜併せて使う

pタグは、brタグ（改行タグ）と適宜併せて使います。

例えば、「私の趣味はサッカーです。サッカーは小学校3年生の時から習い始めて、大学を卒業するまで部活で本格的に続けました。大学卒業後はプレーすることはほとんどなくなりましたが、テレビで試合を見たり、週末にはドームに足を運んでJリーグを観戦することがしてます。」というテキスト文章があります。
この文章は、サッカーに関した内容が変わらないひとまとまりのテキスト文章ですが、全体的に少し長いです。
なので、「大学卒業後は…」の主張やシーンが少し変わる部分で<br>をマークアップして改行します。
また、会話文を入れたとき、「。」などのセンテンスで区切ったとき、文章のリズムを作りたいときなども<br>をマークアップして改行することを検討します。

つまり、brタグ（改行タグ）を適宜併せて使うというわけです。

こうして、brタグ（改行タグ）と適宜併せて使うことが、pタグの使い方です。

ちなみに、brタグを連続で使ったり、段落に使う、デザインの調整で使う、スラッシュありを積極的に使うことは避けましょう。

brタグの使い方

brタグの使い方がいくつかあります。

• 内容が変わらないひとまとまりのテキスト文章で使う
• 項目や順序以外の短めのテキスト文章で使う

内容が変わらないひとまとまりのテキスト文章で使う

brタグは、内容が変わらないひとまとまりのテキスト文章にマークアップします。

項目や順序以外の短めのテキスト文章で使う

brタグは、項目や順序以外の短めのテキスト文章にマークアップします。

HTMLで改行するときに避けたいこと

HTMLで改行するときに避けたいことがいくつかあります。

• brタグを連続で使う
• brタグを段落に使う
• デザインを調整する
• brタグのスラッシュありを積極的に使う

brタグを連続で使う

HTMLで改行するときに、brタグを連続で使うことは避けましょう。

例えば、brタグで改行を多用したとします。
この場合、ソースコード上で他のHTMLタグと混同して見ずらくなったり、コンテンツ同士の区切りがわかりずらくなります。
また、PCやスマホ、タブレットなどのデバイス解像度の違いによって、改行による行間などが変わってきます。
つまり、クローラビリティやユーザビリティの低下が懸念につながる可能性が高まるというわけです。

このように、brタグを連続で使うことが、HTMLで改行するときに避けたいことです。

brタグを段落に使う

HTMLで改行するときに、brタグを段落に使うことは避けましょう。

例えば、長い文章内容を区切るときにbrタグを使うとします。
この場合、空白行が挿入されません。
そうなれば、次の文章まで詰まって全体的にユーザーが読みにくい文章になります。
結果、ユーザーエクスペリエンスの低下を招きやすいというわけです。

こうして、brタグを段落に使うことが、HTMLで改行するときに避けたいことです。

デザインを調整する

HTMLで改行するときに、デザインを調整することは避けましょう。

例えば、pタグやbrタグを積極的に使って、行間や画像間のマージンを調整します。
この場合、文章や画像との間隔が空きすぎたりして余白がうまく調整できません。
そうなれば、デザインのバランスが悪くなって、ユーザーが読みにくいコンテンツになります。
結果、ユーザーエクスペリエンスの低下を招きやすいというわけです。

こうして、デザインを調整することが、HTMLで改行するときに避けたいことです。

ちなみにデザイン調整では、CSSを積極的に使って柔軟に微調整できるようにしましょう。

brタグのスラッシュありを積極的に使う

HTMLで改行するときに、brタグのスラッシュあり（スラッシュ閉じる）を積極的に使うことは避けましょう。

例えば、DOCTYPEが「XHTMl1.0」「XHTML1.1」といったXHTML構文では、brタグ含む全ての空要素をスラッシュ付きで記述するルールが採用されました。
なので、brタグのスラッシュあり「＜br /＞」が推奨されました。

一方、DOCTYPEが「HTML4.01」や「HTML5」「HTML Living standard」といったHTML構文では、brタグのスラッシュなし「＜br＞」が推奨されてます。
「HTML5」や「HTML Living standard」は、現在のHTML構文の主流です。
つまり、スラッシュありを積極的に使うことは基本路線ではないというわけです。

このように、brタグのスラッシュありを積極的に使うことが、HTMLで改行するときに避けたいことです。

pタグを内容が変わらないひとまとまりのテキスト文章で使う

HTMLで改行するときに、pタグを内容が変わらないひとまとまりのテキスト文章で使うことは避けましょう。

例えば、内容が変わらないひとまとまりの文章内でpタグを使います。
この場合、空白行が入って次の文章内容が途切れるので、ユーザーがスムーズに読みづらくなります。
そうなれば、文章の内容が理解しづらくなります。
結果、ユーザーエクスペリエンスの低下を招きやすいというわけです。

こうして、pタグを内容が変わらないひとまとまりのテキスト文章で使うことが、HTMLで改行するときに避けたいことです。

まとめ：HTMLで改行を適切に行って、見やすくわかりやすいコンテンツにしよう

HTMLで改行を適切に行って、見やすくわかりやすいコンテンツにしましょう。

一方、HTMLで改行を不適切に行えば、ユーザビリティやクローラビリティが悪くなります。
具体的には、pタグやbrタグを積極的に使ってデザイン調整します。
この場合、行間が空きすぎたりしてユーザーが読みにくい文章になったり、クローラーに不親切なHTML構造となります。
結果、Googleから評価されづらくなるというわけです。