【イラスト付き】pタグとは？brタグとの違いと書き方、活用方法を解説！

よし、できた！

あっ、ブルーちゃん！実は今、私のブログの記事を書いてるところだったんだ

せっかくだからちょっと読んでみて！

pタグって？

pタグとは、「段落」を指定するために用いられるHTMLタグのことだよ

「p」は英語で段落を意味するParagraphの頭文字から取られているんだ

pタグを適切に使いこなすことで、ユーザーにとってより読みやすくわかりやすいコンテンツを作成することができるよ

pタグは、文章の段落などの、ひとまとまりにしたいテキストを囲む形で使用するよ

こうやって記載すれば、自動的にテキストを段落分けして、前後に改行を加えた形で表示してくれるんだ

pタグとよく似たHTMLタグに、改行をしたい時に使うbrタグがあるんだ

「br」は英語で改行を意味する「Line break」の「break」から取られているよ

どちらも改行を行うタグだけど、brタグはpタグとは違ってテキストを囲んだりはしないで、改行したい位置に単独で記載するんだ

pタグは文章のまとまりを作るタグ、brタグは文章の途中で改行したい時に使うタグで、それぞれ異なった役割があるよ

さっきイエローちゃんが書いていたブログは、改行にbrタグを使っていたよね？

実は、改行をする時はできるだけbrタグではなくpタグを使うべきと言われているんだ

それに、むやみにbrタグを多用することはより良いサイトを作る上であまりオススメできないよ

じゃあ、ここからはbrタグを多用すべきではない理由を説明していくね

実は、brタグはHTMLの構造上非推奨とされているタグなんだ

だから、あまりに多用しすぎたり、行間を作るために連続で記載したりすると、SEO評価が下がってしまう恐れがあるよ

SEOを重視したサイトでは、どうしても文章の途中で改行したい場合以外はなるべくbrタグを使わない方が賢明だよ

brタグを使った改行が多すぎると、PCで確認した時は見栄えが良くても、スマホでは読みづらいテキストになってしまう可能性があるよ

PCとスマホでは画面の横幅の関係上、一行の文字数に違いがあるから、PCでの表示に合わせて頻繁に改行をすると、スマホで表示した時にはガタガタの見た目になってしまうことがあるんだ

スマホでインターネットを見る人はこれからもどんどん増えていくだろうから、あらゆる端末で不便なくテキストを読めるように、改行は最低限に抑えたほうがよりユーザーに優しいサイトになるよ

ここまで説明してきたことを踏まえて、イエローちゃんが書いていたブログのコードを見てみよう

その通り！だから、このように修正すると良いよ

pタグについて、今日話した重要なポイントをまとめるね

pタグについて、よくわかったかな？

また困ったことがあったら気軽に聞いてね〜