HTMLの

要素とは？段落タグの基本的な使い方をわかりやすく解説

この記事では、HTMLの<p>（段落）要素の基本的な使い方について解説します。

<p>要素の役割

HTMLの<p>要素は、文書内の段落（paragraph）を定義するために使用されます。

<p>ここは段落要素の中にあるテキストです。</p>

<p>要素は、Web上で最も頻繁に使われるテキスト要素です。実は、あなたが今読んでいるこの記事も、そのほとんどが段落要素で構成されています。

<p>要素はブロックレベル要素

<p>要素はブロックレベル要素に分類されます。つまり、デフォルトの状態では、文書内で定義された各段落は、ブラウザ上で必ず新しい行から表示されるということです。

<p>ここは1つ目の段落要素の中にあるテキストです。</p>

<p>ここは2つ目の段落要素の中にあるテキストです。</p>

<span>要素との違い

もし<p>タグを<span>タグに置き換えると、これら2つのテキストブロックはインラインで表示されます（縦に積み重なるのではなく、横に並んで表示されます）。これは<span>がインライン要素だからです。

ブラウザのデフォルトスタイル

デフォルトでは、段落要素はユーザーエージェントスタイルシート（User-Agent Stylesheet）から、ほとんどのブラウザにおいて以下のようなスタイルプロパティを継承します。

p {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}

marginプロパティによって上下に余白が適用され、段落同士の間に明確な行間の区切りが生まれます。この余白があることで、読者は文章のまとまりを視覚的に認識しやすくなります。

スタイルのカスタマイズ方法

もちろん、これらのデフォルトスタイルは、外部のCSSスタイルシートを読み込んだり、インラインスタイルを使用したりすることで、自由に上書きすることが可能です。例えば、marginの値を変更すれば、段落間の余白を好みの幅に調整できます。