【タグ解説】pタグの意味や使い方
こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。
HTMLタグの中でも使用頻度の高いタグのpタグ。普段何気なく使用しているこのpタグですが、このタグはどんなタグでどのようなルールがあるのかご存じでしょうか？
今回の記事ではそんなpタグについて詳しく解説したいと思います。
この記事の目次を表示
pタグとは
pタグはHTMLタグにおける段落の役割を持つタグです。
pタグのpは英語で段落を意味する「paragraph（パラグラフ）」の頭文字を取り、ピータグと呼ばれています。
pタグの使い方
pタグは開始の<p>から</p>までの間に段落となる文章を記述します。
pタグは省略することが出来ないタグなので閉じのを忘れないように記述します。
以下は実際の使用例です。
<p>【タグ解説】pタグの意味や使い方</p>See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
pタグの中で改行する場合はbrタグを使用します。
<p>【タグ解説】pタグの意味や使い方<br>【タグ解説】pタグの意味や使い方</p>See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
pタグを使用した具体例
続いて、pタグを使用した具体的な例を見ていきましょう。
見出しと段落
pタグは段落の役割を持つタグなので見出しの役割を持つh〇タグとセットで使用することがよくあります。
<h2>見出し</h2>
<p>【タグ解説】pタグの意味や使い方</p>See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
写真と段落
画像を表示し、それに対する解説や説明文としてpタグを使用することもよくあります。
<img src="https://irodori-design-web.com/blog_image/1950/1950-1.jpg" width=150>
<p>【タグ解説】pタグの意味や使い方</p>See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
pタグの装飾例
pタグで段落を作成する際、CSSと組み合わせることで重要な部分を目立出せることが可能です。
枠線で囲う
pタグの装飾例の最初に、枠線で囲う表現方法をご紹介します。
枠線で囲うことでその部分がひとつの塊と認識しやすくなるため、重要な説明や補足的な説明を入れたい場合に効果的な表現方法になります。
<p>【タグ解説】<span>pタグ</span>の意味や使い方</p>p {
border: 1px solid #dc5a45;
padding: 15px;
}See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
マーカー風
装飾例の最後に、学生時代に教科書の重要な部分をマーカーペンで塗って強調した、表現方法をご紹介します。
長い段落の中でも特に強調したい部分のみ使用することでその部分がより重要なポイントであると解釈してもらえるようになります。
<p>【タグ解説】<span>pタグ</span>の意味や使い方</p>span {
background-color: #ff9;
}See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
マーカー表現については別の記事で詳しくご紹介しています。
pタグの入れ子ルール
pタグは様々な場所で使用することが出来るタグのため、迷ったらつい使ってしまうタグではないでしょうか。
pタグ含め、HTMLタグには入れ子ルールという、そのタグの中で使用してもいいタグ、使用することが出来ないタグというものが存在します。
ここではpタグは、どのタグの中だったら使用していいのか、そしてダメなのかをご紹介します。
pタグの中で使用できるタグ
テキストレベルセマンティクス
- a
- em
- strong
- small
- s
- cite
- q
- dfn
- abbr
- data
- time
- code
- var
- samp
- kbd
- sub
- sup
- i
- b
- u
- mark
- ruby
- bdi
- bdo
- span
- br
- wbr
編集
- ins
- del
埋め込み型コンテンツ
- picture
- img
- iframe
- embed
- object
- video
- audio
- map
- area
- math
- svg
フォーム
- label
- input
- button
- select
- datalist
- textarea
- keygen
- output
- progress
- meter
スクリプティング
- script
- noscript
- template
- canvas
テキスト
- テキスト
pタグを囲う事の出来るタグ
セクション
- body
- article
- section
- nav
- aside
- header
- footer
- address
グルーピングコンテンツ
- blockquote
- li
- dt
- dd
- figure
- figcaption
- div
- main
テキストレベルセマンティクス
- a
編集
- ins
- del
埋め込み型コンテンツ
- object
- video
- audio
- map
表データ
- caption
- th
- td
フォーム
- form
- fieldset
インタラクティブ要素
- details
- dialog
スクリプティング
- noscript
- template
- canvas
pタグとbrタグの違いとは
pタグを使っていて改行したい時、以下のように一度pタグを閉じて新しいpタグを使用することで改行することが出来ます。
<p>【タグ解説】</p>
<p>pタグの意味や使い方</p>See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
そしてもう一つ、brタグを使用することでも改行をすることが出来ます。
<p>【タグ解説】<br>pタグの意味や使い方</p>See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
上の例でも確認できる通り、どちらの場合でも改行したい箇所で改行することが出来ています。
しかし、この二つには大きな違いがあります。
それは、HTMLタグの意味です。
画面上ではどちらも同じですが、前者は改行、後者の場合は別の段落にすることで見た目上、改行することが出来ています。
後者の場合、pタグごとに別の段落として各種サーチエンジンやブラウザは解釈してしまいます。
そのため、同じ段落として改行のみしたい場合はbrタグを使うのが正解になります。
また、段落を変えたい場合はpタグを閉じ、新しいpタグを使うのが正解になります。
コーディングをしていると見た目上は自分が思った通りになっているからついOKと思ってしまいますが、タグにはそれぞれ意味があるので正しく使うようにしましょう。
まとめ
今回の記事では段落を意味するpタグについてご紹介してきました。
普段何気なく使っているpタグですが、タグの意味や使用出来る場所、出来ない場所など以外にも多くのルールが存在しています。
各種サーチエンジンやブラウザに正確に情報を伝えるためにも、pタグに限らず正しいマークアップを心がけたいですね。
