【HTMLリファレンス】段落とは?pタグを使いこなす

launcher-kit-html-reference-use-the-p-tag-as-a-paragraph-htmlp

HTMLのpタグは文章のカタマリである「段落」を作るためのタグです。

タグの評価
使用頻度
 (4.5)
重要度
 (3)

基礎知識

pタグはHTMLの中に段落を作りたい時に使用するタグです。
pタグは使用頻度が非常に高いタグです。

HTMLページの文字はある程度のカタマリを作りpタグで段落とすることで読みやすさを向上させることができます。
ほぼすべてのHTMLドキュメントに段落は存在することになるでしょう。

段落はHTMLの状態を決定づけるほどの裁量の大きさはありませんが、閉じタグが省略できる仕様により意図しない動きをする点には注意しておきましょう。

段落を知ることが正しいpタグの使い方への近道

pタグを厳密(セマンティック)に活用するには段落について知っておくと良いでしょう。

段落は一般的に50〜200字の文字のカタマリをひとつの段落とすることが良いとされています。
(あくまでセオリーでありpタグに文字数制限などはありません)

launcher-kit-what-is-the-html-p-tagparagraph-is-the-smallest-text-block-htmlp

構造

pタグは構造が非常にシンプルです。
基本的にはpタグひとつあたり、一つの段落を入れることになります。

<!-- 基本的なpタグの構造 -->
<p>親譲りの無鉄砲で小供の時から損ばかりしている。</p>
<p>小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。</p>
<p>新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。</p>
<p>小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。(青空文庫より)</p>

属性

固有の属性

pタグに固有の属性はありません。

グローバル属性

pタグも含め、全てのHTMLタグで使用可能な属性

属性名使い方
id任意の文字列HTML要素にidを指定する
idは1ページにひとつ(ユニーク)でなければならない
class任意の文字列HTML要素にclassを指定する。
classは要素のグループ化などに有効的

豆知識

由来

pタグはparagraphパラグラフという言葉に由来します。
paragraphパラグラフのイニシャルを取ってpというタグ名になっています。

注意

pタグの入れ子はできない

段落の中に段落を入れることはできません。

<!-- OK -->
<p>段落が</p>
<p>並列にある</p>

<!-- NG -->
<p>
  <p>段落の入れ子は出来ない</p>
</p>

閉じタグが省略できる=勝手に閉じる

pタグは閉じタグを書かない場合にブラウザが自動で閉じタグを設置するべき場所を判断して閉じタグを自動挿入する仕様になっています。

なので</p>(閉じタグ)の書き忘れ」による意図しない挙動などが起きがちです。
HTMLでコーディングをする際に初学者の方がよく戸惑いがちなところなので覚えておくと良いでしょう。

段落と改行は別物

pタグと混同されがちなタグにbr改行があります。
どちらも文字が段落ちするので見た目上は似たような挙動に見えますが、pは段落を作るbrは文中に改行を差し込む、という明確な役割の違いがあります。

Wordやメモ帳の感覚でHTMLをコーディングしていると段落を連続改行で表現するコードを見ることもありますが、これはHTML文書として適切ではありません。

改行は段落内で文体を整えるために使用することが正しい使い方です。
正しく綺麗なHTMLコーディングのためには、段落そのものを改行でまかなおうとしないことをオススメします。