【HTML入門】brタグとは？pタグとの違いや使い方を解説

HTMLにおけるテキストの整形やレイアウトを行う際、改行を表現するためにbrタグが使用されます。brタグはシンプルなタグであり、開始タグや終了タグを持たず、単体で使用されます。この記事では、brタグの使い方やpタグとの違いについて解説します。

brタグを正しく活用し、テキストのレイアウトを柔軟に調整できるようになりましょう！

忍者CODEマガジンとは？

忍者CODEマガジンは、未経験からでもプロのエンジニアを目指せるプログラミングスクール「忍者CODE」が運営しているプログラミング情報サイトです。

プログラミングの効果的な学習方法
プログラミング用語の解説
エンジニアのキャリアに関する情報

など、プログラミングを始めたばかりの初学者に役立つ記事を幅広く公開しています！

HTMLのbrタグとは
HTMLのbrタグとpタグの違い
1. brタグは改行、pタグは段落
2. pタグの使用を推奨
HTMLのbrタグの使い方
HTMLのbrタグを使用する際の注意点
1. バージョンによってタグが違う
2. 連続で を使用しない
挫折することなくエンジニアを目指すなら
1. 独学？スクール？
まとめ

HTMLのbrタグとは

brタグは、HTMLで改行を表すために使用されるタグです。HTMLでは、改行を行ってもスルーされるかスペースとして扱われます。

brタグは単体で使用され、開始タグや終了タグは必要なく、brタグを挿入すると、そこで改行が行われます。brタグの「br」英単語として行末や改行を意味する「line break」の「break」の略語です。
HTMLの基礎を無料で学ぶ方はこちら▶

HTMLのbrタグとpタグの違い

HTMLで改行をする際、pタグとbrタグはどちらも使えますが、タグ自体に与えられた意味は異なります。今回の記事ではそれぞれの意味を知り、HTMLではpタグが推奨されていることを覚えておきましょう。

brタグは改行、pタグは段落

brタグは、文章を途中で強制的に区切り、改行させるためのタグです。

一方、pタグは文章全体を段落で区切り、読みやすくするために使うタグです。従って、pタグは改行させるために使うタグではないともいえます。二つのタグにおける、本質的な意味の違いを押さえておきましょう。

段落とは、長い文章を内容などからいくつかに分けた区切りのことを言います。pタグを使うことで、文章の流れをつかみやすくなり、結果的にユーザーにとって読みやすいページになります。

pタグの使用を推奨

HTMLでは、構造上の理由などにより、pタグの使用を推奨しています。改行のみを目的としたbrタグは、どうしても段落内で改行したい場合のみ使うようにしましょう。

brタグはHTMLで非推奨とされていることから、SEOを意識したWebページを作成する場合は、多用しすぎないように気を付けることが重要です。

HTMLのbrタグの使い方

brタグは開始タグと終了タグを持たず、単体で使用されます。

使い方はとても簡単です。改行を挿入したい箇所でbrタグを使用します。具体的には、以下のように記述します。

<p>これは段落の最初の文です。<br>これは改行された文です。<br>これはさらに改行された文です。</p>

上記のコードでは、 タグを使って2箇所で改行が行われます。brタグは単体で使用されるため、終了タグは必要ありません。

注意点として、brタグはテキストの改行に使用されることが一般的ですが、段落を表現するために使われるpタグとは異なる点に注意してください。改行だけでなく、文脈に応じて正しく使い分けることが大切です。

プログラミングスクールなら
忍者CODE

HTMLのbrタグを使用する際の注意点

改行タグ を使う際の注意点を2つ挙げます。

バージョンによってタグが違う

HTMLは時代によって何度かバージョンアップされてきました。過去にはHTML4やXHTMLが使用されてきましたが、現在はHTML5が主流となっています。

HTML4とHTML5では タグを使用することができますが、XHTMLでは を使用するため、注意が必要です。

また、 タグと/の間には半角空白を入れる必要があるので、注意が必要です。

XHTMLとは、Webページの記述などに用いられるマークアップ言語であるHTML（HyperText Markup Language）をXMLの仕様に従って定義しなおした言語。Web関連技術の標準化を推進するW3C（World Wide Web Consortium）によって規格の策定が行われた。
引用：IT用語辞典 e-Words

連続で を使用しない

行間を多くあけたいからといって、 を連続で使用するのは構造上望ましくありません。

NG！

<p>こんにちは。<br><br><br>今日はいい天気ですね。</p>

挫折することなくエンジニアを目指すなら

独学？スクール？

これからHTMLやCSSなどプログラミング言語の学習を始めようと考えている方、または最近学習を始めた方がいらっしゃるかと思います。

ただ、実際学習を始めるとなると

1人で学習を進められるかな…
どこをゴールにしていいかわからない…
挫折してしまわないかな…

このように不安な気持ちになる方もいますよね。

たしかに、何かわからないことが出てきたとき、エラーが解決できないとき、誰かに相談できる環境がないことが理由でプログラミング言語の学習を挫折する方が多くいます。

実際にプログラミング言語初学者が挫折をする1番の理由は「不明点が発生した際に気軽に相談できる環境がない」という実態があります。

それだけ学習する環境が大事だということです。

そんな背景があるからこそ、プログラミングの勉強をする際にスクールを選ぶ方が多いのが事実です。

プログラミングスクールに通う理由は他にもあり

・確実にスキルを身に着けたい
・効率良く学習を進めたい
・モチベーションの維持にもつながりそう
・以前に独学で挫折した経験がある

このように「確実に！」「効率良く！」といった声もよく上がります。

やはり途中で挫折してしまったり、どこを目指しているのかわからなくなったりした場合、「プログラミングを学習することは難しい」と認識してしまい、その後のスキル習得を諦めてしまう可能性が非常に高くなります。

このようなことから、社会人で時間もそこまでないため短期間でスキルを習得したい人や独学で進めるのが不安な人が効率性や確実性を求め、プロの講師に相談できる環境が用意されているプログラミングスクールを選択するのがわかります。

「転職をしたい」「副業で稼げるようになりたい」という理由でプログラミング言語を学び始めたとき、わからない箇所を飛ばしてそのままに放置して学習を進めたとしても、目標とする転職や副業が実現するほどのスキルが身につかなければ多くの時間を費やして何も得られないという結果になります。

ですので、1人でCSSを始めとしたプログラミングスキルの習得ができるか不安な方は多少の費用をかけてでも、不明点をすぐに相談・解決できる環境や効率良く学習できる有料サービスを選ぶのがベストだと言えます。

そこでおすすめしたいのが「忍者CODE」です。

忍者CODEをおすすめする1番の理由は「業界最安級の金額でありながら圧倒的学習ボリュームと半永久サポートを提供している」ところにあります。

上記でお伝えしたように、初学者の多くは独力で不明点や問題点を解決できないためにプログラミングの学習を挫折しています。そのため、初学者が経験豊富なプロのエンジニアに相談できない環境下でプログラミングスキルの習得をするのは難易度が高いと言えます。

ですが、忍者CODEでは

・チャットでいつでも、無制限で質問可能
・学習者同士でつながれるコミュニティへの招待

などといったサポート体制を設けているため、学習を進めていく中で出てきた問題点や不明点をスムーズに解決しながら、挫折することなくプログラミングスキルの習得が可能です。

また、忍者CODEでは動画コンテンツにて学習を進めていくため、スッと頭に入ってきやすいようになっているのも特徴です。

未経験でも挫折させないオンラインスクールとして、受講生に寄り添った学習コンテンツを提供している忍者CODEをより詳しく知りたい方はぜひ公式サイトをご覧ください。

公式サイトで詳細を見る

まとめ

いかかでしたでしょうか？

改行タグ と段落タグの使い分けを正しく理解しておくと、とても見やすくなり、どのブラウザでも同じように表示ができます。

HTMLで改行する時は、ぜひタグの意味や役割を理解して使ってみてください！