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