【HTML】pタグ（段落タグ）とは？３分でわかりやすく解説

HTMLのタグは、"paragraph"（段落）を意味します。タグは、Webページ上でテキストを段落に分けるために使用されます。

<!DOCTYPE html>
<html>
<head>
    <title>サンプルページ</title>
</head>
<body>
    <p>これは最初の段落です。ここにテキストが表示されます。</p>
    <p>これは<strong>2番目</strong>の段落です。テキストは<em>斜体</em>や<strong>太字</strong>にすることができます。</p>
    <p><a href="https://www.example.com">これはリンク</a>を含む3番目の段落です。</p>
</body>
</html>

このページではpタグの使い方を１からわかりやすく初心者向けにサンプル付きで解説します。

このページで学べる内容

HTML：pタグ（段落タグ）の意味と使い方
pタグの注意点
改行の考え方（pタグとbrタグ）

Webエンジニアを目指す方であれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。

参考　HTMLの基本構文ルールを３分で学習する

HTML：pタグとは？
1. HTML pタグ：構文ルール
2. HTML pタグ：利用する際の注意点
改行：pタグとbrタグ
Webエンジニア向け→完全無料のHTML/CSSロードマップ

HTML：pタグとは？

タグはHTML（HyperText Markup Language）の要素であり、Webページ上のテキストを段落として整形するために使用されます。

参考　マークアップ言語とは？

は "paragraph"（段落）の略で、テキストを論理的な単位に区切るために使用されます。タグは、開始タグ（）と終了タグ（）のペアで構成され、この間に配置されたテキストが段落として扱われます。

段落は、文章やテキストを論理的な単位に分割するためのもので、通常は一つのアイデアやトピックを表します。文章を段落に分けることで、読者にとって理解しやすく、読みやすくなります。段落は、通常、前後に空白があることで他の段落と区別されます。

HTML pタグ：構文ルール

<!DOCTYPE html>
<html>
<head>
    <title>サンプルページ</title>
</head>
<body>
    <p>これは最初の段落です。ここにテキストが表示されます。</p>
    <p>これは<strong>2番目</strong>の段落です。テキストは<em>斜体</em>や<strong>太字</strong>にすることができます。</p>
    <p><a href="https://www.example.com">これはリンク</a>を含む3番目の段落です。</p>
</body>
</html>

構文ルール

タグは常に閉じタグ（）を使用して終了します。
通常、タグは他のインライン要素（例: <a>、、など）を含むことができますが、ブロック要素（例: <div>、<ul>、<ol>など）を含むことはできません。

参考　インライン要素/ブロック要素

HTML pタグ：利用する際の注意点

以下にpタグの利用する際のいくつかの注意点を整理しました。

初心者のうちはよく間違てしまうためしっかりと押さえておきましょう。

タグは常に閉じタグ（）を使用して終了する必要がある

<p>これは正しい使用方法です。</p>

<p>これは閉じタグがないため、間違った使用方法です。

タグの中にブロックレベル要素（例: <div>、<ul>、<ol>など）を入れてはいけない

<p>これは<a href="https://example.com">リンク</a>を含む正しい使用方法です。</p>

<p>これは<div>ブロック要素</div>を含むため、間違った使用方法です。</p>

参考　aタグ / divタグ

タグは他のタグの中に入れてはいけない
→予期しないレイアウトやスタイルの問題が発生する可能性があります。

<p>これは最初の段落です。</p>
<p>これは2番目の段落です。</p>

<p>これは<p>最初の段落の中にある2番目の段落</p>です。</p>

pタグの基本的な意味と注意点についての解説は以上です。ここからは、より実践的な内容についてご説明していきます。

改行：pタグとbrタグ

pタグはタグで囲った範囲を１つの段落として認識するため、以下のようにブラウザ上でも改行して表示されます。

<!DOCTYPE html>
<html>
<head>
    <title>サンプルページ</title>
</head>
<body>
    <p>これは最初の段落です。ここにテキストが表示されます。</p>
    <p>これは<strong>2番目</strong>の段落です。テキストは<em>斜体</em>や<strong>太字</strong>にすることができます。</p>
    <p><a href="https://www.example.com">これはリンク</a>を含む3番目の段落です。</p>
</body>
</html>

そのため、単に改行することを目的としてpタグを利用してしまいがちなのですが、実は本来的にはその使い方は誤りです。

改行だけを目的とするのであれば、brタグを利用するのが正しいです。

pタグ vs brタグ

タグ
テキストを段落に分割＆適切な空白を前後に提供するために使用される
 タグ
単純にテキストを次の行に移動させるために使用される

brタグ

 タグは、HTMLで改行（line break）を表現するためのタグです。テキストの途中で行を変えることを指します。 タグは単独のタグで、閉じタグは不要です。

これは最初の行です。<br>
これは2番目の行です。<br>
これは3番目の行です。

この例では、 タグを使用してテキストを3つの行に分割しています。ただし、 タグは段落のような論理的な単位を作成せず、単純にテキストを次の行に移動させるだけという点に注意。

最後にHTMLのpタグを利用したいくつかの実践的なサンプルコードを記載しておきます。

以下の内容を理解できればあなたのpタグに対する基本的な理解はOKです。

①CSSクラスを利用してスタイルを適用する例

プロのコーダーは、インラインスタイルよりもCSSクラスを利用してスタイリングを行うことが一般的です。これにより、スタイルを再利用でき、コードの保守性が向上します。

<!-- HTML -->
<p class="highlight">この段落はハイライトされたスタイルが適用されます。</p>

<!-- CSS -->
<style>
.highlight {
  font-size: 18px;
  color: blue;
  background-color: yellow;
}
</style>

②段落の間隔を調整する例

段落の間隔（マージン）を調整することで、テキストの可読性を向上させることができます。

<!-- HTML -->
<p class="paragraph">これは最初の段落です。</p>
<p class="paragraph">これは2番目の段落です。</p>

<!-- CSS -->
<style>
.paragraph {
  margin-bottom: 1.5em;
}
</style>

③行間（line-height）を調整する例

テキストの行間を調整することで、読みやすさが向上します。

<!-- HTML -->
<p class="paragraph-with-spacing">これは行間が調整された段落です。</p>

<!-- CSS -->
<style>
.paragraph-with-spacing {
  line-height: 1.6;
}
</style>

④テキストの揃え位置を設定する例

テキストの揃え位置（左揃え、右揃え、中央揃え、両端揃え）を調整することで、デザインを改善できます。

<!-- HTML -->
<p class="text-left">これは左揃えの段落です。</p>
<p class="text-right">これは右揃えの段落です。</p>
<p class="text-center">これは中央揃えの段落です。</p>
<p class="text-justify">これは両端揃えの段落です。</p>

<!-- CSS -->
<style>
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}
.text-justify {
  text-align: justify;
}
</style>