HTMLで改行する際に使われるタグには、brタグがあります。brタグはpタグ内で使うことができ、単純に文章を改行する際に使います。また、Pタグも閉じて、新しいpタグで始めれば文章を改行させることができます。

このふたつのタグは文章を改行する点では同じですが、それぞれ異なる特徴があるので状況に応じて使い分けることが重要です。

この記事では、改行タグの使い方や注意すべきポイントについて解説します。これらのタグを使いHTMLで改行することによるSEOへの影響はありませんが、連続したタグの乱用はクローラビリティ的に良くないので避けて下さい。

HTMLで使える改行タグは2種類

コンテンツを作成するにあたって、ユーザーが読みやすくなるように文章の間に改行を入れたいと考える方も多いはずです。HTMLで使える主な改行タグには、brタグがあります。また、pタグも使い方では文章に改行を入れることができます。この2つのタグの違いを説明します。

brタグ

文章の行を変えたいときに使用するのがbrタグです。たとえば、ストーリー展開や主張が変わるときなど、文章を区切ったりリズムを作ったりする目的で使用されます。HTMLでは、改行させたい位置にタグを入力すれば行が改行されます。

入力するタグは、次のとおりです。

<p> ここで<br> 改行します。 </p>

と表示されます。brタグはpタグの中で使うことができ、改行したい文章の頭に入れることによりタグの後ろの文章から改行されます。好きな位置で行を変えたいときは、brタグを活用しましょう。押さえておきたいポイントは、次のとおりです。

brタグは、状況に応じて気軽に行を変えられます。ただし、乱用すると、良くないのでSEO効果に影響が出ないように注意が必要です。

pタグ

pタグは、Paragraph（パラグラフ）の略で「段落」を意味します。HTMLの段落タグで、文章の段落ごとにHTML内の該当箇所に<p>をマークアップします。

Pタグでひと段落の文章が終わり、</p>閉じタグで閉じます。そうして、また次の段落を作成するために、Pタグで始めると、その文章は次の段落になるので、自然と改行されます。

入力するタグは、次のとおりです。

<p>ここが1段落目の文章</p><p>ここが2段落目の文章</p>

と表示されます。Pタグは閉じれば改行となりますが、一文一文閉じて改行していくのは得策ではありません。テーマや文章の内容が変わり、段落を変えたいときにのみ使うようにしましょう。

段落ごとに改行できるpタグはHTMLでの使用が推奨されており、普通に使えばSEOにも悪い影響とはなりません。改行のみを目的としたbrタグは、どうしても段落内で改行したい場合のみ使うようにしましょう。

pタグの主な使い方は、次のとおりです。

時間軸が変わるときに使用する

ストーリー展開として時間軸が変わるときは、段落ごとに改行すると効果的です。たとえば、過去から現在に渡り一連の流れを説明したり年月の変化が大きい話題が出てきたりする際に役立ちます。時間軸が変わるときに文章が改行されることで、ユーザーの理解を深められます。前後を読み直す必要がなくなりストレスなくページを閲覧できるので、離脱率を減らせる可能性が高いです。

新しい話題に変わるときに使う

長文のコンテンツの場合、途中で新しい話題に変わることも多いです。必ず改行する必要はありませんが、話題が変わるたびに行を変えれば、ユーザーはひと段落できるので文章が読みやすくなります。特に、物語を綴る場合は、第一章と第二章など段落が分かれることも多いです。このような場合は、改行して文章にリズムと緩急を付けましょう。

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

前後の文章の関連性が乏しいときにも改行タグを活用するのがおすすめです。行を変えることで、一旦話が終わることを示せるのでユーザーは読みやすくなります。だらだら文章が続くと、どこで話に区切りが付くのか分かりません。文章の途中に改行があれば、ある程度予測しながら読み進められます。

brタグと併せて使用する

段落ごとに改行するpタグと好きな位置で行を変えられるbrタグを併用して使用する方法もあります。たとえば、段落ごとの文章が長いとき、途中で行を変えたいこともあるはずです。このような場合に役立つのが、改行タグの併用です。段落の中で行を変えることで文章にリズムが生まれるため、より読みやすくなります。ただ、brタグの乱用はクローラビリティ的に良くありませんのでしないように注意しましょう。

brタグとpタグに違い

改行タグは、正しい意味や特徴をしっかり理解したうえでコンテンツ作成時で使用することが大切です。brタグとpタグの違いは、他にもあります。

SEO的にはどちらが良いか

SEOで効果的なタグはどちらかというと、brタグの乱用は避け、なるべくpタグで段落分けして自然と文章が改行される形が理想です。pタグで改行されていれば、Googleのロボットも1段落が終わって2段落目になったと理解しやすいですし、クローラビリティ的にも強制的に改行させるbrタグよりもpタグの方が良いと言われています。特に、改行目的で1文1文pタグを閉じて文章を構築するのはよくありません。段落内で文章を区切りたい場合はbrタグを使用しても問題ありませんが、多用しすぎるあまりよくありませんので、しっかりSEOを考慮したうえで使うことが大切です。

 使用目的で使い方を分ける

改行タグとして同じ意味で捉える方も多いですが、pタグとbrタグは使用目的が異なります。たとえば、pタグは段落ごとに改行を入れたい場合に最適です。まとまった段落ごとで改行を入れられるため、話に区切りをつけやすくなります。一方、brタグは文章と文章の間に改行を入れられるタグです。改行を入れたい位置で行を変えられるので、強制的に区切りたい場合に適しています。

表示方法が異なる

近年は、スマホからサイトにアクセスするユーザーが増えています。スマホ画面の表示のされ方によっては、ユーザーにストレスを与えるので読みづらさを感じると離脱される可能性が高まります。実は、改行タグはブラウザの表示のされ方に違いがあるので注意しなければいけません。たとえば、brタグは、スマホで見ると改行にズレが生じることがあります。タグを設定したあとは、正常に表示されるか確認することが大切です。

HTMLで改行するときの4つの注意ポイント

文章や段落で改行することで、リズム感が生まれてユーザーは読みやすくなるといったメリットがあります。そんな便利な改行タグをですが、使用する際は注意するべきポイントがいくつかあります。

主な注意ポイントは、次のとおりです。

内容が変わらない場所で改行する

内容が変わらない場所で改行するのは、おすすめしません。ページの見栄え的に同じ行数で改行するのがきれいですが、内容が変わらない場所で行を変えると文章が途中で切れてしまいます。

文章が途切れるとリズム感が失われるので、ユーザーの混乱を招く恐れがあります。読みづらいと感じて離脱される可能性もあるため、ページの滞在時間も短くなります。滞在時間が短くなるとコンテンツの評価にも影響を及ぼすので注意しましょう。

連続してbrタグは使わない

サイトによっては、一文ごとに改行してデザイン性を高める施策を取る方もいます。改行することで行間に余白が生まれるため、ページを開いたときにすっきりとした印象を与えられます。

一見するとデザイン性が高く映りますが、HTMLで改行するときに連続してbrタグ使うのはおすすめしません。brタグを多用しすぎると、ソースコード上で複数のタグが乱立することになります。追記や修正するときなどに区切りがわからりづらくなるため、大事なタグを削除してしまうなどの問題が起こることがあります。サイトを管理しづらくなるので注意しましょう。

改行タグでレイアウト調整しない

HTMLで改行するとき、改行タグでデザインやレイアウトを編集するのは控えましょう。ページの見栄えを良くするために、文章や画像の間隔を編集したくなる方も多いはずです。改行タグでデザインやレイアウトを編集すると、間隔や余白が空き過ぎることがあります。全体のバランスが悪くなるため、見栄えも悪くなります。ユーザーも読みづらくなるため、満足度が下がることも多いです。ページのデザインやレイアウトを調整したい場合は、スタイルを指定できるCSSでおこないましょう。

そのほかの改行できるタグ

brタグとPタグ以外にも見た目の文章を改行させることができるタグにpreタグがあります。

preタグは整形済みテキスト (preformatted text) といい、このタグで囲んだ文章はソースコードの改行がそのまま反映されて表示されます。

例えば下記の場合、

<pre>1行目の文章
2行目の文章　3行目の文章
4行目の文章</pre>

3つの改行（1行目・・・2行目・・・4行目・・・）がそのままできます。preタグは非推奨のため、なるべく使わないようにしましょう。

まとめ

検索エンジンから高い評価を得るためには、ユーザーにとって読みやすいコンテンツを作成することが大切です。なかでも、改行タグはHTMLに適度に入れることで文章にリズムが生まれ、ユーザーがスムーズに読み進められます。見た目も圧迫感を与えないため、内容も理解しやすくなります。文章が長いコンテンツを作成する場合は、改行タグをうまく使用して読みやすい記事にまとめましょう。改行する際には、pタグとbrタグを併用し、段落の改行にはpタグ、どうしても文章内での改行にはbrタグを使い乱用するのは避けましょう。

 

SEOとWEBマーケティングの東京SEOメーカーTOPへ戻る

この記事の監修者

アドマノ株式会社　代表取締役　天野　剛志

日本大学法学部卒業、広告代理店で12年間働いている間、SEOと出会い、SEO草創期からSEO研究を始める。SEOを独学で研究し100以上のサイトで実験と検証を繰り返しました。そのノウハウを元に起業し現在、11期目。営業、SEOコンサル、WEB解析（Googleアナリティクス個人認定資格GAIQ保持）コーディング、サイト制作となんでもこなす。会社としては今まで2000以上のサイトのSEO対策を手掛けてきました。