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

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

投稿日:

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

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

本記事は執筆時点(2023年03月15日)の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。

広告
広告

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のpicture要素とsourceタグの使い方【レス……

2024年11月07日
picture要素を使った画像の表示について備忘録としてまとめます。 picture要素とは? HTMLのpicture要素は、様々な画面サイズやブラウザに合わ […]
サムネイル

video要素とsource要素で画面サイズに応じて読み込む……

2024年09月19日
最終更新日:2024年11月07日
HTMLのsource要素とは? HTMLのsource要素は、video要素やpicture要素の子要素として複数のメディアソースを指定したいときに使う要素で […]
サムネイル

HTMLのテキストボックスにクリアボタンを実装【inputの……

2024年09月04日
inputのtype属性を「search」にすれば自動的にクリアボタンが表示されます。簡単ですがデザインはブラウザに依存しておりカスタマイズはできません。JSを使って処理を自作する方法は、HTML・CSS・JSに関するある程度の知識が必要ですが、自由にカスタマイズできます。
サムネイル

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を指定すると、フォームなどにラジオボタンを設置することができます。複数の選択肢の中からどれかひとつをユーザーに選んでもらいたい時に使用します。