<p>｜正しい段落の使い方・記述方法

pタグとは?

pタグは“1つの段落”を意味するHTMLタグで、<p>と</p>で囲まれた範囲が段落要素となります。段落は英語で“Paragraph”といい、この頭文字の’P’がタグの名称となっています。

HTMLで構築されるWebページにおいて、文章は内容を構成する要素の基本となるので、pタグは使用する機会が非常に多いHTMLタグです。（使用頻度が1番多いHTMLタグかもしれません）
WordPressや、はてなブログのようなブログサービスでも、記事の本文は通常、pタグでマークアップされます。

pタグはHTMLの学習で最初に覚えるべき基本のタグです。しっかり、pタグの正しい使い方をマスターしましょう。

pタグは決して“改行をするためのタグ”ではない

pタグについての説明するWebページ、または「HTMLの改行の仕方」のように改行方法を紹介するWebページで「pタグを使うと改行できる」という紹介を時々見かけます。しかし、pタグはあくまで“1つの段落を表す”ためのタグなので、「改行はpタグで行う」とは絶対に覚えないでください。

pタグでマークアップすることで、その文章が1つの段落となり、段落ごとに文章が区切られるために改行を伴うということです。改行したいが為に段落内の文章の途中で無理やりpタグを閉じては不自然な意味の文章になってしまいます。

文章の“段落”と“改行”の違い

“段落”と“改行”の違いはしっかり覚えておきましょう。（HTMLに限らず文書作成全般で役に立ちます！）

段落

文章を内容によって区切った1つのまとまりのこと

改行

文章内で新しい行をつくること（つまり行を変えるということ）

段落は文章全体の中から内容で区切ることで、同じ内容の文章を1つのまとまりにします。なので、異なる内容の段落との間では改行が発生するわけです。
一方、改行は“意図的”に新しい行をつくることを言います。つまり、段落内で行を変えたい場合には改行を使用するということです。

pタグの使い方・記述方法

pタグによるマークアップは、ほかの多くのHTMLタグと同じく以下のように<p>と</p>で囲むように記述します。

<p>ここに本文のテキストを書きます</p>

pタグの表示結果は、基本的には何の装飾もない通常のテキストとなります。

一般にWebブラウザの持つpタグのデフォルトスタイルでは、線や文字の太さなどの装飾はありませんが、上下にmarginによる余白が指定されています。なのでWebブラウザで見た場合に段落間で余白があるわけです。
ここで注意してほしい点は「段落間でもっと広い余白が欲しい」という理由で以下のように空のpタグを連続して使うということはやめましょう。

<p>ここに本文のテキストを書きます</p>
<p></p>
<p></p>
<p></p>
<p>ここに本文のテキストを書きます</p>

この方法では“見た目上”は広い余白を作ることができますが、検索エンジンから見たら内容の無い空の段落がいくつも並んでいると認識されてしまいます。

見た目上の理由で余白が欲しい場合はCSSで設定をしましょう。「Webのいろは」では、本文中のpタグには以下のように余白を指定しています。

p{
  margin:0 0 2em;
}

pタグごとに余白を変えたい場合はどうすればいいか?

先程の例は、全部のpタグの下に2em分の余白がつきますが、段落ごとに余白の大きさを変えたいという場合はCSSのクラスを使って余白を調整しましょう。あらかじめ、何種類かの余白用のCSSクラスを作っておき、使う場面に応じて使い分けます。

.large-space{
  margin:0 0 3.6em;
}
.medium-space{
  margin:0 0 2.4em;
}
.small-space{
  margin:0 0 1.4em;
}
.x-small-space{
  margin:0 0 .8em;
}

この様に作っておけば、元々pタグに指定されるスタイルと合わせて5種類の余白を使い分けれます。使い方は以下のようにHTMLタグにCSSクラスを追加するだけです。

<p class="small-space">ここに本文のテキストを書きます</p>

pタグのalign属性について

HTML4では、pタグはalign属性という文字揃えを指定する属性が指定可能でしたが、この属性はHTML4当時から非推奨でした。そしてHTML5になり、align属性自体が無くなったので、現在の使用は推奨できません。

文字揃えについてもCSSで指定するようにしましょう。CSSのtext-alignプロパティで文字揃えを簡単に指定することが可能です。

<p class="align-right">このテキストは右揃えになります</p>

.align-right{
  text-align:right;
}

テキストが右揃えになりましたね！
左揃え用や中央揃え用のCSSクラスを用意しておき、CSSで文字揃えを制御できると便利です。

pタグの他に適切なHTMLタグが無いかも考える

Webページ内の本文はの基本は、pタグでマークアップする段落となりますが、他に適したHTMLタグがある場合はそちらのタグを使用します。例えば、箇条書きを表す場合は、pタグと改行のbrタグで表すのではなく、ul、liタグ（またはol、liタグ）を使いましょう。

Webブラウザでの“見た目上”はほとんど同じ箇条書きですがマークアップの意味は全く異なるので、当然、検索エンジンには正しく伝わりません。他にも、見出しではhタグを使用し、他のWebサイトから引用したコンテンツはblockquoteタグなどを使用しマークアップしましょう。
ほかのタグについては、下記をご覧ください。

<h1>～<h6> | 見出しの使い方・記述方法

<ul>・<ol>・<li> | リスト表示（箇条書き）の使い方・記述方法

<blockquote>・<q>・<cite> | Webページでの引用の使い方・表記方法

HTML5では各HTMLタグの意味もより明快になっています

HTML4では、適当な意味を持つタグがないためdivタグやpタグがよく使われていましたが、HTML5に変わり様々なタグが新たに登場しました。
以下の一例を紹介します。

使う場面は様々なので一概には言えませんが、上記のタグの内側（タグによっては外側）でpタグを組み合わせて使うと、色々な意味をより正確に表現することが可能になると思います。

まとめ