• HOME > 
  • HTML > 
  • HTMLのpタグ(段落)の使い方【改行タグbrとの違い】

HTMLのpタグ(段落)の使い方【改行タグbrとの違い】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

pタグとは?

pタグの「p」は段落・節を意味するParagraphの頭文字で、ひとかたまりの文章であることを指定するためのタグです。

開始タグと終了タグからなる要素で、pタグを使用して段落を分けると前後の要素と改行されます。

pタグの書き方

HTML

<p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>

Webページにおいても、適切に段落を分けることで文章を読みやすくすることができます。

br(改行)タグとの違い

HTMLには同じく改行を行うbrタグが存在しますが、こちらは文章内で改行する際に用いるという違いがあります。

pタグには検索エンジンのクローラーにページの構造を伝えるという役割も持ちます。

段落を分けるときはpタグを使い、pタグ内の文中で改行するときはbrタグを使うというように正しく使い分けなければSEOにつながりにくくなってしまうので注意してください。

HTML

<p>古池や<br>蛙飛び込む<br>水の音</p>

プレビュー

古池や
蛙飛び込む
水の音

文字揃えを行う【align属性】

pタグはalign属性を記述することで中央と左右の文字揃えを行うことができます。

align属性の書き方
center中央揃え
left左揃え
right右揃え

HTML

<p align="center">古池や<br>蛙飛び込む<br>水の音</p>
<p align="left">古池や<br>蛙飛び込む<br>水の音</p>
<p align="right">古池や<br>蛙飛び込む<br>水の音</p>

プレビュー

古池や
蛙飛び込む
水の音
古池や
蛙飛び込む
水の音
古池や
蛙飛び込む
水の音

CSSのtext-alignプロパティを使っても同じように文字揃えを行うことが可能です。

まとめ

以上がHTMLのpタグの使い方です。

Webサイトを制作するうえで頻出するHTMLタグのひとつですので役割をしっかりと把握しておきましょう。

関連する記事

サムネイル

HTMLのinputのdateで日付の入力欄を作る【初期値や……

2023年10月01日
最終更新日:2023年09月28日
HTMLのinputタグのtype属性にdateを指定すると、フォームなどに日付の入力欄を設置することができます。
サムネイル

ブラウザキャッシュを回避するCache Bustingの方法……

2023年09月01日
Cache Busting(キャッシュバスティング)とはキャッシュを利用せずに読み込みするように指定することです。
サムネイル

HTMLのdatalistタグの使い方【文字入力とプルダウン……

2023年08月08日
HTMLのdatalistは、テキストボックスとセレクトボックスを組み合わせたような入力欄を作ることができるタグです。一見普通のテキストボックスですが、クリックすると用意した入力候補が表示されます。
サムネイル

HTMLでラジオボタンを作成する方法【初期値の設定・チェック……

2023年08月08日
HTMLのinputタグのtype属性にradioを指定すると、フォームなどにラジオボタンを設置することができます。複数の選択肢の中からどれかひとつをユーザーに選んでもらいたい時に使用します。
サムネイル

HTMLのselectタグの使い方【multiple属性で複……

2023年08月03日
HTMLのselectはフォームなどにセレクトボックスを設置することができるタグです。あらかじめ用意した選択肢をプルダウンの形で表示させます。
サムネイル

HTMLのtextareaタグの使い方【inputとの違いや……

2023年07月10日
HTMLのtextareaはフォームなどに改行可能な入力ボックスを作成することができるタグです。属性値を設定することで幅や行数などを変更することが可能です。
サムネイル

HTMLのh1~h6タグのSEO対策における役割と使い方【画……

2023年07月10日
HTMLのh1~h6タグはページ内でタイトルや見出しを表示させる際に使用するタグです。Hは見出しという意味を持つ「Heading」の頭文字です。