HTMLのpタグとは
HTMLでWebページの文章を表現する際に、テキストを読みやすく整理するためには適切なタグの使用が欠かせません。特に、pタグとbrタグは、基本的なテキストの整形に役立つ重要な要素です。
pタグ<p>は段落を表し、長い文章を適切に区切るのに適しています。一方、brタグ<br>は、行内の強制的な改行に使われます。
この記事では、pタグとbrタグの違い、それぞれの役割や使い分け、具体的な使用方法について詳しく解説します。
【参考】：MDN Web Docs
HTMLタグとは
HTMLタグはWebページの構造や内容を記述するための要素です。構造や内容の整理に役立ちます。例えば、「見出し」や「段落」、「画像」といった要素をHTMLタグで囲むことで、ブラウザにどのように表示するかを指示します。
【参考】：Search: "HTMLタグ"｜MDN Web Docs
タグの役割
HTMLタグは、Webブラウザに「ここには見出しがあります」「ここは段落です」といった情報を伝えることで文章を構造化し、Webページの表示形式を決定します。
またSEO※対策では非常に重要な役割を担っています。（※SEOは「検索エンジン最適化」のことであり、Googleなどで検索した時にサイトを上位に表示させるための方策を意味します。 ）
タグの書き方
タグは、「<」と「>」で囲まれた単語で表されます。例えば、<p>は段落を表すタグです。多くのタグには開始タグと終了タグのペアがあり、開始タグで要素の始まりを、終了タグで終わりを示します。
・開始タグ: <tagname> ・終了タグ: </tagname>
【タグの実例】 次のコードでは、pタグ<p>で囲まれた部分が段落として表示されます。
html
<p>これは段落です。</p>タグの種類
HTMLタグは、Webページに表示させる情報を指定する文字列です。タグを使用することで、文章に意味づけ（マークアップ）を行うことができ、Webページのテキストや画像、リンクなどを正しく表示できます。HTMLタグには次に挙げるように、様々な種類のタグがあります。
・構造を表すタグ：<html>、<head>、<body>など、ページ全体の構造を定義するタグ ・見出しを表すタグ：<h1>、<h2>、<h3>など、見出しレベルを指定するタグ ・文章を表すタグ：<p>（段落）、<a>（リンク）、<img>（画像）など、文章や画像を表示するタグ ・リストを表すタグ：<ul>（箇条書きリスト）、<ol>（番号付きリスト）、<li>（リスト項目）など、リストを作成するタグ ・表を表すタグ：<table>、<tr>、<td>など、表を作成するタグ
タグの属性
タグの中には、さらに詳細な情報を指定するための属性を持つものがあります。属性は、開始タグの中に「=」と「値」を指定して設定します。
下記の例では、<a>タグのhref属性にリンク先のURLを指定しています。
html
<a href="https://example.com">リンク</a>pタグとは
pタグ<p>は「paragraph（段落）」を意味し、HTMLで段落を作成するためのタグです。ブラウザがこのタグを認識すると、自動的に前後に空白（インデントやマージン）を挿入して、テキストが整った形で表示されます。
【参考】：Search: "pタグ"｜MDN Web Docs
段落を表すタグ
HTMLでテキストを段落ごとに分ける際は、基本的にpタグを使います。例えば、ブログ記事や説明文など、複数の段落で構成される文章の場合、各段落をpタグで囲むことで、視覚的に見やすい構成になります。
pタグの具体的な使い方
pタグ<p>の使い方はシンプルです。以下に基本的な使い方を示します。
html
<!-- HTMLコード例 →
<p>これは1つ目の段落です。</p>
<p>これは2つ目の段落です。</p>このように、pタグを使うと各段落が個別に分かれて表示され、読みやすい文章を作成できます。
pタグの属性
pタグには、以下のようなalign属性、CSSを使用した中央揃え、class属性、id属性などの属性を使用できます。
【align属性】 align属性はテキストの整列（左揃え、右揃え、中央揃えなど）を設定するための属性ですが、align属性は非推奨であり、CSSを使用したスタイリングが一般的です。
html
<!-- 推奨されない方法 →
<p align="center">中央揃えの段落</p>
<!-- 推奨される方法（CSSを使用） →
<p style="text-align: center;">中央揃えの段落</p>【CSSを使用した中央揃え】 外部のCSSファイルや<style>タグを使用する場合は次のように書きます。
/* CSS */
p {
text-align: center;
}【class属性、id属性】 classやid属性はCSSと組み合わせてスタイリングやJavaScriptによる制御に使われます。
html
<p class="important">重要な情報を含む段落</p>pタグを使っても改行しない
HTMLでpタグを用いても、意図したように改行しないケースがあります。以下に、pタグを用いても改行しない場合の想定原因と対策について記します。
◼︎CSSのスタイルの影響 ・CSSで「line-height: 0;」などの設定がされていると、行間がつぶれてしまい、改行が視覚的に確認できなくなることがある ・width属性で要素の幅を固定した場合、内容が幅を超えると自動的に折り返されるが、意図した位置で改行されないことがある ・「display: inline」などの設定により、要素がインライン要素として扱われると、ブロックレベル要素であるpタグの特性が失われ、改行されなくなることがある
以上の対応としては、該当する要素のCSSスタイルを確認し、不要なスタイルを削除するか、修正します。
◼︎HTML構造の誤り ・pタグの閉じタグ</p>が抜けていると、次のpタグまでが1つの段落として扱われてしまう可能性がある ・pタグの中に別のpタグを入れ子にすると、論理的に矛盾が生じたり、階層構造が崩れたりする
pタグの開きと閉じ、入れ子の有無などを確認して、正しい構造になっているかを確認しましょう。
◼︎ブラウザの表示設定 ・フォントサイズが小さすぎると、1行が長くなり、改行すべきところで改行がされなくなる場合がある ・ブラウザには、HTML、CSS、JavaScriptなどのコードを読み込み、それを画面に表示するためのレンダリングエンジンがあるが、ブラウザによってエンジンが異なり、表示結果が異なる場合がある
この現象では、異なるブラウザで表示して、再現性があるかを確認しましょう。
pタグを使わないで改行する方法
HTMLではpタグを使わないで改行する方法はあるのでしょうか？段落を区切るために一般的にpタグが使われますが、必ずしも必須ではありません。状況に応じて、以下のような方法で改行を表現することができます。
◼︎brタグを使う 特定の場所で強制的に改行したい場合には、 brタグ<br>を使用します。
html
<p>これは1つの段落です。<br>
ここで改行します。<br>
新しい行になります。</p>◼︎CSSで改行を制御する デザインに合わせて柔軟に改行を調整したい場合には、次のようにCSSを用いて改行を制御できます。
・white-space: pre：空白や改行をそのまま表示する ・word-wrap: break-word：長すぎる単語を途中で折り返す ・overflow: hidden; text-overflow: ellipsis;：テキストが要素の幅を超えた場合に省略する
css
/* CSSで改行を保持しつつ必要に応じて折り返す */
p {
white-space: pre-wrap; /* 改行を保持しつつ、必要であれば折り返す */
}◼︎divタグを使う ブロック要素として扱いたい場合には、divタグ<div>内にコンテンツを配置し、CSSでスタイルを調整します。
html
<div>
これは<br>
複数の<br>
行に<br>
渡る<br>
テキストです。
</div>pタグ以外にも、brタグやCSSを使って改行を表現できます。それぞれの方法の特徴を理解し、状況に合わせて使い分けることが重要です。
brタグとは
brタグ<br>は「break（改行）」を意味し、強制的に改行を行うためのタグです。段落単位で改行を行うpタグとは異なり、同じ段落内で特定の箇所に改行が必要な場合に使われます。
brタグの具体的な使い方
例えば、詩のように行ごとに改行が必要な場合や、住所の表示などで改行が求められる場合に適しています。
html
<p>静かな湖<br>澄みわたる空<br>心安らぐひととき</p>brタグの注意点
brタグ<br>は単体で使用するタグであり、</br>と閉じる必要はありません。また、過度に使用するとレイアウトが乱れる可能性があるため、適度に使うように注意が必要です。
pタグとbrタグの使い分け
HTMLで文章を記述する際、改行を表現するためにpタグとbrタグを使いますが、この2つのタグは、それぞれ異なる役割を持っています。ここでは、pタグとbrタグを適切に使い分けるためのポイントを解説します。
それぞれのタグの役割を理解する
pタグとbrタグのそれぞれの役割は次の通りです。
pタグ<p>：段落を区切るために使用します。文章の構成を明確にする役割があり、読みやすいテキストを実現します。 brタグ<br>：行内での強制改行が必要な場合に使用します。
段落の区切りにはpタグを、行内の改行にはbrタグを使う
一般的な文章では、段落ごとにpタグを使い、詩や住所などで行内改行が必要な場合にbrタグを使用します。ただし、brタグの多用は避けるべきであり、適切な場所でのみ使用するべきです。特に、pタグを使うとブラウザが段落間にスペースを追加してしまうため、注意が必要です。
具体的な例で比較
ここでは、pタグやbrタグの正しい使い方、間違った使い方の具体例を見てみましょう。
【正しい使い方】 最初に正しい使い方の具体例を紹介します。
"html
<!-- pタグの正しい使い方 -->"
"<p>これは1つの段落です。段落は文章のまとまりを表します。</p>
<p>別の段落です。pタグを使うことで、文章が読みやすくなります。</p>"各pタグで1つの段落が区切られ、見やすく整理された文章になります。
"html
<!-- brタグの正しい使い方 -->"
"<p>私の住所は、<br>
東京都千代田区霞が関です。</p>"住所のように、1行ずつ表示したい場合にbrタグを使用します。
【間違った使い方】 続いて、pタグやbrタグの間違った使い方の事例を紹介します。
html
<!-- pタグの間違った使い方 →
<p>これは<br> 1つの段落です。</p>pタグの中にbrタグを無意味に使うのは、構造がわかりにくくなり、SEOにも悪影響を与える可能性があります。
html
<!-- brタグの間違った使い方 →
<br><br><br>brタグを連続して使用するのは、CSSでマージンを設定するなど、より適切な方法があります。brタグの本来の目的から外れた使い方です。
よくある間違いと解決策
誤って段落ごとにbrタグを使用してしまうと、段落としての役割が機能せず、不自然な空白やレイアウトの崩れが発生することがあります。段落を分けたい場合はpタグを使い、同じ段落内で改行が必要な場合にのみbrタグを使うようにしましょう。
pタグとbrタグを使い分けよう
HTMLのpタグとbrタグは、文章を視覚的に整理するための重要な要素です。pタグは段落を表し、各段落を区切って表示する役割を果たします。一方、brタグは行内の強制改行に使い、詩や住所などの特定の表現に適しています。
これらのタグを適切に使い分けることで、読みやすく分かりやすいHTML文章を作成できます。適切なタグ選択を心がけ、ユーザにとって見やすいページを作成しましょう。
その他の関連記事
その他に関連する内容は、下記の記事でもご紹介しています。ぜひ参考にご覧ください。
編集部オススメコンテンツ
アンドエンジニアへの取材依頼、情報提供などはこちらから
