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

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

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

忍者CODEマガジンとは？

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

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

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

おすすめのオンラインプログラミングスクール
忍者CODEのWeb制作コース：月額9,800円から、HTML以外にもWeb制作に必要な言語を学べるスクール

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の学習に迷った方はまずはHTML入門講座をチェックしましょう！
HTMLとは何かといった話から、問題集、一部講義動画の視聴もすべて無料で利用できます！！
本の購入やスクールへ通う前に、一度入門講座を確認しておくと、スムーズに学習を始めることができますよ。

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

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

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

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

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

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

pタグの使用を推奨

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

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

コーディングスキルを活かして「副業」を獲得するには？

忍者CODEが提供するWeb制作コースの副業・案件獲得保証プランでは、HTMLだけでなくCSS、JavaScript、PHPと言った言語も学べるため、高単価な副業案件を獲得できるスキルを身につけられます。
現役クリエイターが学習のサポートをしてくれるため、学習中に分からないことがあれば、24時間無制限のチャットサポートでいつでも質問が可能です。
また、カリキュラムを受講完了した1ヶ月以内に5万円分の案件を必ずお渡ししています。副業をしたい方はぜひ忍者CODEをチェックしましょう！

HTMLのbrタグの使い方

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

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

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

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

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

独学での学習に行き詰ったらプログラミングスクールを検討しよう！

本や学習サイトを使って独学でHTMLを学習するのはなかなか難しいものですよね。
忍者CODEが提供するWeb制作コースの独学プランでは、24時間質問できるチャットサポート体制を整えているので、分からないところはいつでもプロのクリエイターに聞くことができます。
独学での勉強に限界を感じたときは、ぜひ無料相談を受けてみましょう！

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を学んで「転職」を目指す方へ

忍者CODEが提供するWeb制作コースの転職支援プランでは、未経験からエンジニアへ転職するための充実したサポート体制を提供しています。Web制作コースではHTMLだけでなく、CSS、JavaScript、PHPを学べるので、フロントエンドエンジニアとして必要なスキルを身につけることができます。また、現役クリエイターが学習のサポートをしてくれるため、学習中に分からないことがあれば、24時間無制限のチャットサポートでいつでも質問が可能です。
転職活動に関してはプロのキャリアアドバイザーのサポートを受けられ、ポートフォリオや履歴書の添削も行いますので、IT業界が未経験の方でも、安心して転職活動に臨むことができますよ！