pタグとは？
pタグは、Paragraphの略で「段落」を意味するHTMLタグのことです。「段落タグ」とも呼ばれます。Webページを作成する上で、文章の構造を明確にするために使用されます。
pタグの役割
例えば、ブログ記事の文章内容で「さて本題に入るが…」のような主張やシーンが変わって新しい話題に移るときがあります。このようなときに、基本的に段落を付けます。HTMLでは、この段落を表すためにpタグを使用します。
pタグを使用することで、ブラウザは文章の区切りを認識し、適切な余白やインデントを自動的に挿入します。これにより、Webページの可読性が向上し、ユーザーにとって読みやすい文章を作成することができます。
pタグの使い方
pタグは、開始タグ <p> と 終了タグ </p> で囲まれた範囲を段落として扱います。具体的な使用例は以下の通りです。
<p>これは1つ目の段落です。</p>
<p>これは2つ目の段落です。</p>
上記のように記述すると、ブラウザ上では以下のように表示されます。
これは1つ目の段落です。
これは2つ目の段落です。
pタグとbrタグの違い
段落を表すタグとしては、brタグも存在します。brタグは改行を挿入するためのタグですが、pタグは段落そのものを表すという点で異なります。
brタグを使用した場合、視覚的に改行されるのみで、ブラウザは文章の構造を認識しません。一方、pタグを使用した場合、ブラウザは文章の構造を認識するため、アクセシビリティの面でも優れています。文章の構造を明確にするためには、brタグではなくpタグを使用することが推奨されます。
pタグに関する注意点
pタグは、他のブロックレベル要素（見出し、リスト、div要素など）の中にネストすることはできません。誤ってネストした場合、ブラウザがHTMLを正しく解釈できず、レイアウトが崩れる可能性があります。
pタグの属性
pタグは、HTMLのグローバル属性を使用することができます。グローバル属性とは、全てのHTML要素に共通して使用できる属性のことです。主なグローバル属性としては、以下のようなものがあります。
| 属性名 | 説明 |
|---|---|
| class | 要素にクラス名を追加します。 |
| id | 要素に一意のIDを追加します。 |
| style | 要素にインラインスタイルを追加します。 |
| title | 要素にツールチップを追加します。 |
参考資料
よくある質問
Q1. pタグは必ず閉じタグが必要ですか？
A1. はい、pタグは開始タグ <p> と 終了タグ </p> の両方が必要です。閉じタグを省略すると、レイアウトが崩れる可能性があります。
Q2. pタグの中に他のHTMLタグを入れることはできますか？
A2. はい、pタグの中に他のインライン要素（aタグ、spanタグ、strongタグなど）を入れることができます。ただし、ブロックレベル要素（見出し、リスト、div要素など）は入れることができません。
Q3. pタグを使って段落のインデントを設定することはできますか？
A3. pタグ自身にはインデントを設定する属性はありません。インデントを設定したい場合は、CSSを使用する必要があります。
その他の参考記事:spanタグ