【HTML pタグとは】pタグの使い方と改行brの違い

今回はHTMLで最もよく使うタグであるpタグ（段落タグ）の使い方および、改行brタグとの違いについて解説します。

pタグはまず初めに覚えておきたい基本中の基本のタグです。ぜひ覚えておきましょう。

pタグの基本的な使い方

それではまず、pタグの基本的な使い方を解説します。

pタグは段落タグと呼ばれ、文章の各段落のまとまりをマークアップするのに使用されます。なお、各段落毎に1つのpタグを使用するため、ブログ記事のように長い文章の中にはpタグが多用されるのが一般的です。

ちなみにWordPressなどで記事を書く際、いちいち段落をpタグで囲う必要はないですが、これはWordPress側が自動でpタグを生成しているためです。

自分の書いた記事を手軽に発信・販売できるサービス「note」などでも、文章箇所にはpタグが自動付与されています。

pタグを使う上でのポイント・注意点

次にpタグを使う上でのポイント・注意点を紹介します。

pタグを書く際は各段落を<p>〜</p>で囲うだけでよくシンプルですが、いくつかポイントや注意点があるので覚えておきましょう。

1. テキストだけでなく画像にも使える

まず1つ目は、pタグはテキストだけでなく画像やフォーム欄などにも使用できるという点です。

pタグは段落タグと呼ばれるためテキストにしか使用できないと思われがちですが、文章の流れで使用する画像に関してはpタグで囲ってあげることが可能です。

HTML の <p> 要素は、テキストの段落を表します。視覚メディアにおいて、段落はふつう隣接するブロックと上下の空白や最初の行の字下げによって隔てられたテキストのブロックとして表現されますが、 HTML の段落は画像やフォーム欄などの関連するコンテンツを構造的にまとめることができます。

引用：<p>: 段落要素 - HTML: HyperText Markup Language | MDN

ただし、画像をマークアップする方法としてはdivタグやfigureタグを使用する方法もあります。

どれを使っても文法的に間違いではありませんので、それほど使い分けを気にする必要はありません。

あえていうと、文脈の流れで画像を使用する場合pタグを利用することが多く、文脈とは関係ない画像を利用する場合はfigureタグを、レイアウト調整目的の場合にdivタグを利用するという使われ方が多いです。

■画像をマークアップするタグの使い分け

2. 同一段落内で改行したい場合はbrタグを使用する

2つ目は、同一段落内で改行したい場合はbrタグを使用するという点です。

文章を書いている際「段落は変わって欲しくないけれども改行を入れたい」といった場合があると思います。そういった場合はpタグではなくbrタグを使用します。

補足：各段落の初めにインデントを取る方法

最後に補足として、各段落の初めにインデントを取る方法を紹介します。

各段落にインデントを取りたい場合はtext-indentプロパティを使用すればOKです。

上の例では「text-indent: 16px」と指定しているため、16pxのインデントを取っています。

まとめ・pタグは段落のまとまりを囲うHTMLタグ！

まとめです。今回は段落のまとまりをマークアップするのに使用するpタグの基本的な使い方やbrタグとの違い・注意点を解説しました。

pタグは最もよく使うHTMLタグの1つなので、正しい使い方をしっかりと覚えておくようにしましょう。

なおpタグで追加したテキストの大きさを変えたり、色を変えたりしたい場合は、以下のようなCSSプロパティが利用できます。各CSSプロパティの使い方は別記事にて解説しておりますので、興味がある方はこちらもご覧ください。

今回は以上になります。

最後までご覧いただき、ありがとうございました。
 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました！

最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。