HTMLでよく使われるタグの1つに「brタグ」があります。Webページで改行を入れるときに使われますが、brタグのほかにも「pタグ」や「preタグ」を使って改行を入れる場合もあります。
いずれも改行を入れられるタグですが、実はそれぞれに正しい使い方があります。適切に使い分けないと、Webページの表示結果に悪影響を与える場合があります。
本記事では、brタグの意味や、pタグ、preタグとの違い、記述方法について解説していきます。それぞれのタグの違いについて分からない人は、ぜひ本記事を参考にして、brタグ、pタグ、preタグの正しい使い方を理解しましょう。
目次
HTMLのbrタグとは？
HTMLのbrタグとは、Webページの表示結果で「改行」を入れるために使うタグのことです。「br」というのは「break」を意味しています。
brタグのほかに、pタグやpreタグでも改行を入れられますが、それぞれ意味合いや使い方が異なります。
「改行できるのであれば、どのタグを使ってもいい」と思われがちですが、Webページの読みやすさや、HTMLの編集のしやすさ、Googleからの評価に差が出てきます。そのため、brタグと、pタグやpreタグの違いを理解して、正しく使うことが大切です。
関連記事
・HTMLとは？簡単なHTMLタグの基本からCSSの基礎まで初心者にもわかりやすく解説
・空白文字とは？打ち方や使い方を解説します！
brタグとpタグの違い
brタグとpタグには、以下のような違いがあります。
| brタグ | pタグ | |
| 目的 | 単一の改行を作成するために使用される | 段落を定義するために使用される |
| 使用場面 | 文章の中で改行をしたい場合や、複数行のアドレスや連絡先情報など、一連のテキスト内の改行を作成したい場合 | 単一の空行を作成して段落を区切り、ブロック要素を作成したい場合 |
| 記述方法 | 終了タグがなく単一タグで記述 | 開始タグと終了タグで記述 |
pタグの「p」は「paragraph」の頭文字で、「段落」を定義するためのタグです。pタグを使うと、開始タグと終了タグで挟んだ文章の前後で改行されます。これにより、段落が視覚的に区切られて見やすくなります。
開始タグと終了タグで挟まれた範囲に対して、CSSの内容を指定したり、id属性を利用してJavaScriptを制御できたりします。
関連記事：JavaScriptとは！初心者でも分かる基本的な概念と仕組みを解説！
brタグとpreタグの違い
brタグとpreタグには、以下のような違いがあります。
| brタグ | preタグ | |
| 目的 | 単一の改行を作成するために使用される | テキストを事前に書式設定するために使用される |
| 使用場面 | 文章の中で改行をしたい場合や、複数行のアドレスや連絡先情報など、一連のテキスト内の改行を作成したい場合 | コード編集時に、コードの改行や空白などを保持したい場合 |
| 記述方法 | 終了タグがなく単一タグで記述 | 開始タグと終了タグで記述 |
「pre」とは、「preformatted text」の略で、HTML内で書式設定されたテキストを表示するために使用されます。HTMLのエディタの中で、文字列に改行を入れたとしても、そのままの状態では、Web表示結果で改行が無視されてしまいます。
もちろんbrタグを使って改行すればいいのですが、preタグを使えば、改行箇所でbrタグを入れなくてもいいので、見やすいコードが書けます。
HTMLの改行方法
それでは、改行を入れるためによく使われる、brタグとpタグの記述方法を解説します。
brタグの記述方法
brタグは、文章の中で改行を入れたい場所に<br>と記述します。具体的な書き方は、以下のようになります。
今日の天気は曇のち晴れです。<br>予想最高気温は25℃です。<br>洗濯物はよく乾くでしょう。
実行結果は以下のとおりです。
今日の天気は曇のち晴れです。
予想最高気温は25℃です。
洗濯物はよく乾くでしょう。
brタグを入れたところで改行されます。
pタグの記述方法
pタグは、段落を作成したい文章に対して記述します。開始タグと終了タグでワンセットなので、段落を作成したい文章の前後をpタグではさみます。具体的な書き方は、以下のようになります。
<p>昨日の夕食は美味しいピザでした。新鮮なトマトとモッツァレラチーズの組み合わせは絶品でした。</p>
<p>今朝は早起きしてジョギングに出かけました。爽やかな朝の空気を感じながら、リフレッシュできました。</p>
<p>週末には友人と映画館に行く予定です。最新のアクション映画が公開されているので、とても楽しみです。</p>
実行結果は以下のとおりです。
昨日の夕食は美味しいピザでした。新鮮なトマトとモッツァレラチーズの組み合わせは絶品でした。
今朝は早起きしてジョギングに出かけました。爽やかな朝の空気を感じながら、リフレッシュできました。
週末には友人と映画館に行く予定です。最新のアクション映画が公開されているので、とても楽しみです。
上記の例では、それぞれの段落で異なるトピックを扱っています。pタグを使用して各段落の文章を挟むと、Webページで表示したときに、それぞれの段落を自動的に区切って、上下に適切なスペースが追加されて表示されます。
HTMLで改行する際の注意点は？
brタグ、pタグ、preタグは、どれも改行を反映できるHTMLタグですが、それぞれのタグを適切に使わないと、Webページの読みやすさや、Googleからの評価に差が出てきます。特に、以下のような使い方をしないように気をつけることが大切です。
● brタグを段落で使ってしまう
● デザインの調整に対してbrタグを使ってしまう
● brタグを連続で入れてしまう
● スラッシュありのbrタグを使ってしまう
● 内容が変わらない文章でpタグを使ってしまう
なぜこれらの使い方がいけないのか、それぞれ順番に解説します。
brタグを段落で使ってしまう
brタグは段落で使わないようにしましょう。なぜなら、検索エンジンに対して、該当箇所を段落部分として伝えられないからです。
検索エンジンがクロールするときに、文章にpタグがあることで段落と認識します。これにより、該当ページが、どのような文章構造を持っているのか理解しやすくなり、わかりやすいページとして評価されやすくなります。
しかし、brタグは、単に文字列を改行するだけなので、段落とはみなされず、一連の文章と判断されてしまいます。検索エンジンからの評価を上げるためにも、段落を指定する場合はbrタグを使わないようにしましょう。
デザインの調整に対してbrタグを使ってしまう
brタグを入れれば、手軽に改行できることから、brタグでデザイン調整をする人もいますが、やめましょう。なぜなら、レスポンシブデザイン（端末ごとの最適な表示）の実現が難しくなるからです。
たとえば、パソコン画面で表示させることを想定して、brタグで改行を入れて見やすいレイアウトを整えたとしても、スマホ画面で見たときに、読みやすい表示とならない場合が多いです。
デザインの調整は、CSSで段落や要素の間隔を簡単にできますので、brタグで調整しようとするのはやめましょう。
brタグを連続で入れてしまう
文章の前後に適切な空白を入れて見やすくするために、連続でbrタグを入れる人もいますが、これもやめましょう。なぜなら、前述のデザイン調整でbrタグを使わないほうがよい理由と同様、レスポンシブデザインに対応できなくなるからです。
やはりこちらも、画面表示サイズを変えたり、スマホ画面で表示させたりすると、不自然な改行が入りやすくなります。もし、適切な空白を入れたいのであれば、pタグを利用し、CSSのmarginやpaddingプロパティを使って調整しましょう。
スラッシュありのbrタグを使ってしまう
brタグは、後ろにスラッシュを入れて<br/>と書くこともできますが、この書き方はおすすめしません。
なぜなら、スラッシュありのbrタグは、主にXHTMLの文法で自己終了タグとして使用されるタグであり、一部の古いブラウザや一部の環境で正しく解釈されない場合があるからです。
スラッシュありの自己終了タグが正しく認識されないと、Webページの表示で意図しない結果となることもあります。
そのため、ブラウザの互換性を保つためにも、スラッシュを省略した<br>タグを使用することが推奨されます。スラッシュありのbrタグは、XHTMLの文法で自己終了タグとして使用されます。
内容が変わらない文章でpタグを使ってしまう
同じトピックの文章内でpタグを入れないようにしましょう。なぜなら、pタグは段落を意味するタグであるため、検索エンジンからpタグで挟んだ箇所がすべて段落と判断されてしまうからです。そのため、検索エンジンのクローラーに適切にインデックスされない可能性もあります。
関連記事：検索エンジンとは。世の中にある検索エンジン10選も紹介
行間（デザイン）の調整にはCSSがおすすめ
行間の調整も含めて、Webページのデザインを調整するのであれば、CSSの使用をおすすめします。なぜなら、柔軟なデザイン調整ができるからです。
たとえば文字の行の高さを調整する場合、pタグのCSSにline-heightプロパティを使うことで、行の高さを以下のパターンで調整できます。
〈例〉
● line-height: 30px; /* ピクセル単位で調整 */
● line-height: normal; /* 自動調整 */
● line-height: 2em; /* 段落の文字の高さを基準とした単位で調整 */
● line-height: 150%; /* 段落のフォントサイズのパーセンテージで調整 */
● line-height: 1.5; /* 現在の要素のフォントサイズを基準とした単位で調整 */
CSSを使えば、brタグでは難しい細かい調整ができます。また、CSSを使用することで、行間のスタイルの一元管理もできます。
特定の要素やクラスに対して行間を設定すれば、それが適用されるすべての場所で一貫したデザインが適用されます。また、CSSのスタイルルールは複数のページや要素で再利用できるため、メンテナンスの面でもおすすめです。
関連記事：CSSとは？できること、HTMLとの関係や基本文法
brタグ以外に頻出するタグ
HTMLの編集において頻出するタグとして、brタグやpタグを紹介してきました。brタグ以外によく使われるタグについても、参考までに紹介しておきます。
● <div>：ブロックレベルの要素で、他の要素をグループ化するために使用
● <a>：アンカーリンクを作成するために使用
● <img>`：画像を表示するために使用
● <ul>、<li>： 順序なしのリストを作成するために使用
● <ol>、<li>：順序付きリストを作成するために使用
● <table>、<tr>、<td>： テーブルを作成するために使用
● <form>、<input>、<button>：フォームを作成するために使用
● <h1>から<h6>：見出しを表現するために使用
これらは一般的に使用されるHTMLタグの一部ですが、実際にはさらに多くのタグが存在します。それぞれのタグの使用については、コンテンツの意味や構造に基づいて正しく選択できるのが重要です。
まとめ
本記事では、brタグの意味や、pタグ、preタグとの違い、記述方法について解説しました。
brタグは、文章の中で改行を入れたいときに使える便利なタグですが、適切に使わないと、表示結果や検索エンジンの評価に対して悪影響になることもあります。
文章のなかで、トピックが変わる箇所で改行を入れたいときは、pタグを使うと検索エンジンにも評価されやすくなります。
また、pタグはCSSと組み合わせることで、柔軟なデザインに対応できたり、デザインを一括制御できたりと、非常に便利です。
brタグを多用して改行したり、レイアウトを整えたりしている人は、ぜひpタグとCSSの使い方を習得して、見やすいレイアウトのWebページを作りましょう。
