PR

【HTML】段落を表すpタグの使い方のご紹介!改行を作るbrタグとの違いも解説!

WEB制作技術系

HTMLで、段落を表すには、pタグを使います。

pタグは、文章に段落を作成する事が出来るので文章を読みやすくしてくれますが、それと似た、改行を作るbrタグというものがあります。中には、pタグとbrタグの使い分けに混同してしまう方もいるようです。

今回の記事では、段落を表すpタグの使い方の紹介と、brタグとの違いについて解説します。

段落を表すpタグの使い方

pタグは、文章の段落を区切る役割があるタグです。paragraph(段落という意味)の頭文字のpを取っています。

基本的な使い方は、下記のとおりです。

<p>今回の記事では、プログラミングで挫折してしまう原因やおすすめの対策方法についてご紹介します。</p>

こんな感じで、文章を「<p>」「</p>」で囲むだけです。基本的には、新しい話題に移るときまでを囲む感じです。

基本的な使い方を理解した上で、もう少し長い文章を例に見てみましょう。

WEBデザイナーやエンジニアに憧れ、JavaScriptやPHP等のプログラミング言語を勉強してみたものの、思ったよりも難しく、挫折しかけている方もいらっしゃるのではないでしょうか?プログラミングは、なんと約9割の人が挫折するというデータもあります。その原因とは一体なんなのか。今回の記事では、プログラミングで挫折してしまう原因やおすすめの対策方法についてご紹介します。

こちらの文章ですが、1つのかたまりになっていて、読みづらいですね。この文章を、pタグを使って3つに段落分けしてみようと思います。

<p>WEBデザイナーやエンジニアに憧れ、JavaScriptやPHP等のプログラミング言語を勉強してみたものの、思ったよりも難しく、挫折しかけている方もいらっしゃるのではないでしょうか?</p>
<p>プログラミングは、なんと約9割の人が挫折するというデータもあります。その原因とは一体なんなのか。</p>
<p>今回の記事では、プログラミングで挫折してしまう原因やおすすめの対策方法についてご紹介します。</p>

WEBデザイナーやエンジニアに憧れ、JavaScriptやPHP等のプログラミング言語を勉強してみたものの、思ったよりも難しく、挫折しかけている方もいらっしゃるのではないでしょうか?

プログラミングは、なんと約9割の人が挫折するというデータもあります。その原因とは一体なんなのか。

今回の記事では、WEBデザイナーの私が、プログラミングで挫折してしまう原因やおすすめの対策方法についてご紹介します。

pタグを使用して段落を作成してあげると、段落の間に改行が生まれ、読みやすくなりました。

改行を作るbrタグとの違いは?

pタグが「段落」を表すのに対し、brタグは「改行」を作る為に使用しますが、この2つのタグの使い分けに混同してしまう方もいます。

そのような方は、下記表を参考に使い分けてみてください。

タグ使うシーン
pタグ主張やシーンが変わり、新しい話題に移る時に使う。
brタグ文章に改行を作ってメリハリをつけたい時に使う。要は装飾の為に使う。

基本的に、タグに与えられた意味と目的をよく考えればご理解いただけると思いますが、pタグは、主張やシーンが変わる時に段落をつける為に使い、brタグは、改行のみが目的の場合に使います

brタグに関しては、下記の記事で詳しく解説していますので、ご覧ください。

【HTML】brタグの使い方のご紹介!改行されない(効かない)場合の対処法もご紹介!サンプル付き!

まとめ

今回は、pタグの使い方のご紹介や、brタグとの違いについて解説しました。

HTMLのタグは沢山あり、一度に全ての意味や使い方を覚えるのは大変かもしれませんが、本記事が少しでも役に立てば幸いです。

タイトルとURLをコピーしました