Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

<p>

『<p>』タグは段落(Paragraph)を表すタグです。テキストのまとまりをひとつの段落として区切る際に使用します。ブラウザはデフォルトで段落の前後に余白(margin)を自動で追加します。

構文
<p>これはひとつの段落です。</p>
<p>これは別の段落です。段落の前後には自動で余白が入ります。</p>
サンプルコード
<article>
  <h2>プログラミングとは</h2>

  <!-- テキストのまとまりを段落で区切ります -->
  <p>プログラミングとは、コンピューターに対して行う命令を記述することです。
  人間がわかる言葉(プログラミング言語)で手順を書き、それをコンピューターが実行します。</p>

  <p>プログラミング言語にはJavaScript・Python・PHP・Swiftなどさまざまな種類があります。
  それぞれ得意な分野が異なるため、目的に応じて言語を選びます。</p>

  <!-- pタグの中にはインライン要素を入れられます -->
  <p>初心者にはまず<strong>HTML</strong>と<em>CSS</em>から始めることをおすすめします。
  詳しくは<a href="/tpl_rep.php?cat=html-beginner&fl=r1">HTML入門</a>をご覧ください。</p>
</article>
実行結果

3つの段落がそれぞれ独立した行で表示され、段落と段落の間には自動的に余白が追加されます。3つ目の段落では「HTML」が太字、「CSS」がイタリック、「HTML入門」がリンクとして表示されます。

概要

『<p>』はブロックレベル要素のため、前後で自動的に改行されます。段落内で改行したい場合は『<br>』タグを使いますが、段落を区切るには『<p>』を別々に書くほうがHTMLとして正しい使い方です。

『<p>』タグの中には文字・リンク・画像・強調タグ(『<strong>』『<em>』)など、インライン要素を配置できます。ただし、『<p>』の中に別のブロックレベル要素(『<div>』『<p>』など)を入れることはHTMLの仕様上できません。入れ子にしようとするとブラウザが自動的にタグを閉じてしまいます。

改行だけを目的として空の『<p>』タグや『<br>』を連続して使うのは避けましょう。余白はCSSの『margin』や『padding』プロパティで調整するのが正しい方法です。

対応ブラウザ
Chrome Chrome
49 以降
全バージョンで対応しています
Firefox Firefox
57 以降
全バージョンで対応しています
Safari Safari
18 以降
全バージョンで対応しています
Edge Edge
80 以降
11 以前 ×
IE IE
11 以前 ×
Opera Opera
48 以降
14 以前 ×
iOS Safari iOS Safari
18 以降
全バージョンで対応しています
Android Browser Android Browser
37 以降
4 以前 ×
Chrome Android Chrome Android
36 以降
17 以前 ×
Firefox Android Firefox Android
79 以降
3 以前 ×

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。