HTMLのp
タグは文章のカタマリである「段落」を作るためのタグです。
目次
基礎知識
p
タグはHTMLの中に段落を作りたい時に使用するタグです。p
タグは使用頻度が非常に高いタグです。
HTMLページの文字はある程度のカタマリを作りp
タグで段落とすることで読みやすさを向上させることができます。
ほぼすべてのHTMLドキュメントに段落は存在することになるでしょう。
段落はHTMLの状態を決定づけるほどの裁量の大きさはありませんが、閉じタグが省略できる仕様により意図しない動きをする点には注意しておきましょう。
段落を知ることが正しいp
タグの使い方への近道
p
タグを厳密(セマンティック)に活用するには段落について知っておくと良いでしょう。
段落は一般的に50〜200字の文字のカタマリをひとつの段落とすることが良いとされています。
(あくまでセオリーでありp
タグに文字数制限などはありません)
構造
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コーディングのためには、段落そのものを改行でまかなおうとしないことをオススメします。