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

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

投稿日:

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タグのひとつですので役割をしっかりと把握しておきましょう。

関連する記事

サムネイル

Google Chromeのデベロッパーツールの使い方【画像……

2022年01月15日
最終更新日:2022年02月12日
デベロッパーツールとはWEBブラウザであるGoogle Chromeにはじめから備わっている機能の一つです。閲覧中のWEBサイトのページを構成しているHTMLやCSSといったソースコードを確認することができます
サムネイル

HTMLとCSSだけでアコーディオンメニューを作る方法【初心……

2020年12月18日
最終更新日:2022年07月05日
アコーディオンメニューとは、メニューの項目名をクリックすると非表示にされていたコンテンツが項目名の下に広がって表示される機能のことです。HTMLとCSSだけで簡単に実装することが可能です。
サムネイル

HTMLでスクロールバーを表示させる方法

2020年12月17日
最終更新日:2022年01月28日
HTMLで表示させるスクロールバーとは? HTMLとCSSを用いることでサイト内のコンテンツを一部だけ見えるようにし隠れた部分をスクロールして見るようにすること […]
サムネイル

HTMLにGoogle MAP(グーグルマップ)の埋め込みを……

2020年12月16日
最終更新日:2022年01月28日
Google MAPとは? 埋め込みとは? 自身のサイトのページの中に特定の場所を示したGoogle MAPを表示させることが出来ます。 簡単かつ無料なうえ、ペ […]
サムネイル

HTMLのtable(テーブル)タグの使い方

2020年12月15日
最終更新日:2022年01月27日
<table>タグとは? WEBサイトに表を表示させたい場合にHTMLの<table>(テーブル)タグを使用します。 単に表の作成に利用 […]
サムネイル

HTMLのformタグで入力フォームを作る方法

2020年12月14日
最終更新日:2022年01月28日
<form>タグとは? 「フォームで入力した内容を送信する」機能をもつHTMLタグです。 問い合わせフォームは、別に集計してメールを送る処理を記述し […]