HTMLで文章を表示するとき、pタグとpreタグはどちらもテキストを扱うための要素ですが、目的と表示のされ方が大きく異なります。pタグは一般的な文章の段落を表すために使い、preタグは入力した空白や改行をそのまま見せたいときに使います。
HTMLのpタグとpreタグの基本
pタグは文章の段落を表すための要素です
pタグは、HTMLで「ひとまとまりの文章」を表すために使います。ここでいう段落とは、文章の意味が一区切りになっている部分のことです。たとえば、ブログ記事の本文、商品説明、プロフィール文、サービス紹介文など、通常の読み物として表示したい文章にはpタグがよく使われます。
HTMLでは、タグによって「この部分はどのような意味を持つのか」をブラウザに伝えます。ブラウザとは、Webページを表示するためのソフトのことで、ChromeやSafariなどが代表例です。pタグを使うと、ブラウザや検索エンジンに対して「ここは段落の文章です」と伝えられます。
たとえば、次のように書きます。
<p>HTMLでは、文章の段落を表すときにpタグを使います。</p>
<p>段落ごとにpタグを分けることで、読みやすい構造になります。</p>このようにpタグを分けると、文章の区切りが明確になります。見た目としても、通常は段落と段落の間に余白が入ります。ただし、この余白はブラウザの初期設定によるものです。見た目を細かく調整したい場合は、CSSを使います。CSSとは、文字の色、余白、サイズなど、Webページの見た目を整えるための言語です。
pタグは、文章を自然に読ませたい場面に向いています。文章中でEnterキーを押して改行しても、HTML上ではその改行がそのまま画面に反映されるわけではありません。HTMLでは、連続した空白や改行は基本的に1つの空白として扱われます。そのため、pタグは「文章の意味を段落として伝えるためのタグ」と考えると理解しやすいです。
preタグは入力した形を保って表示するための要素です
preタグは、あらかじめ整えられたテキストを、その形のまま表示したいときに使います。preは「preformatted text」の略で、日本語では「整形済みテキスト」と説明されます。整形済みテキストとは、空白、タブ、改行などの配置に意味があるテキストのことです。
通常のHTMLでは、複数の空白を入れても画面上では1つの空白として表示されます。しかし、preタグの中では、入力した空白や改行がそのまま表示されます。そのため、コード、設定ファイル、コマンド、詩、アスキーアートのように、文字の並びや行の位置が重要な内容に向いています。
たとえば、次のように書きます。
<pre>
1行目の文章
2行目は前に空白があります
3行目の文章
</pre>この場合、2行目の前にある空白も画面上に反映されます。pタグでは同じように書いても、空白や改行は期待どおりに表示されません。つまり、preタグは「文章の意味」よりも「書かれた形」を重視して表示するためのタグです。
preタグの中では、文字が等幅フォントで表示されることが一般的です。等幅フォントとは、すべての文字が同じ幅で表示されるフォントのことです。たとえば、プログラムのコードでは、文字の位置をそろえることで読みやすくなる場合があります。そのため、preタグはコード表示と相性が良いです。
ただし、preタグは通常の本文すべてに使うものではありません。長い説明文や記事本文をpreタグで囲むと、画面幅に合わせた自然な折り返しがされにくくなり、スマートフォンなどで読みにくくなることがあります。文章を読みやすく伝えたい場合はpタグ、形を保って見せたい場合はpreタグという考え方が大切です。
pタグとpreタグは目的で使い分けます
pタグとpreタグは、どちらもテキストを表示できますが、選び方の基準は「文章として読ませたいのか」「入力した形をそのまま見せたいのか」です。文章として読ませたい場合はpタグを使います。改行や空白そのものに意味がある場合はpreタグを使います。
たとえば、Webページの説明文として「このサービスは初心者でも使いやすい設計です」と表示したい場合はpタグが適しています。一方で、コマンドラインの入力例として「npm install」のような内容を複数行で表示したい場合はpreタグが適しています。
初心者のうちは、見た目だけでタグを選んでしまいがちです。しかし、HTMLでは見た目だけでなく、内容の意味に合ったタグを選ぶことが重要です。pタグは段落、preタグは整形済みテキストという意味を持っています。この意味を意識すると、後からCSSで見た目を調整するときにも扱いやすくなります。
HTMLを書くときは、「このテキストは普通の文章なのか」「空白や改行を含めた形に意味があるのか」を考えてください。この判断ができるようになると、pタグとpreタグの使い分けで迷いにくくなります。
pタグが向いている文章の書き方
pタグは、Webページ上で通常の文章を読みやすく表示したいときに使います。ニュース記事、ブログ本文、説明文、プロフィール、商品紹介など、読者に文章として内容を伝える場面ではpタグが基本になります。pタグを正しく使うと、HTMLの構造が分かりやすくなり、後から見た目を調整するときにも扱いやすくなります。
文章の意味ごとに段落を分けます
pタグを使うときは、文章の意味が一区切りになる場所で段落を分けることが大切です。段落とは、1つの話題や説明をまとめた文章のかたまりです。たとえば、商品の特徴を説明する段落、使い方を説明する段落、注意点を説明する段落は、それぞれ別のpタグにすると読みやすくなります。
次のように、内容のまとまりごとにpタグを分けます。
<p>このサービスは、HTMLを初めて学ぶ方でも使いやすいように設計されています。</p>
<p>画面の案内に沿って操作するだけで、基本的なページ作成を体験できます。</p>このように書くと、ブラウザはそれぞれを別の段落として扱います。ブラウザとは、Webページを表示するためのソフトのことで、ChromeやSafariなどがあります。pタグを使って段落を分けることで、文章の区切りが画面上でも分かりやすくなります。
初心者の方がよく迷う点として、「1文ごとにpタグを使うべきか」という疑問があります。必ずしも1文ごとに分ける必要はありません。意味がつながっている文章であれば、複数の文を1つのpタグに入れて問題ありません。
<p>HTMLでは、文章のまとまりをpタグで表します。1つの段落には、関連する内容をまとめて書くと読みやすくなります。</p>この例では、2つの文が同じ話題について説明しているため、1つのpタグにまとめています。pタグは「1行を作るタグ」ではなく、「段落を表すタグ」と考えると使い方を間違えにくくなります。
見た目ではなく文章の役割で判断します
pタグは、単に余白を作るためのタグではありません。多くのブラウザでは、pタグの前後に自動で余白が入るため、見た目を整える目的で使いたくなるかもしれません。しかし、HTMLではタグの意味を意識して使うことが重要です。
HTMLは、Webページの構造を表すための言語です。構造とは、「ここは見出しです」「ここは段落です」「ここは一覧です」のように、内容の役割を示すことです。そのため、文章の段落であればpタグを使い、見出しであればh2やh3などの見出しタグを使います。
たとえば、次のような使い方は適切ではありません。
<p>サービスの特徴</p>
<p>初心者でも使いやすく、短時間で基本操作を覚えられます。</p>「サービスの特徴」が見出しとして使われているなら、pタグではなく見出しタグを使うほうが自然です。
<h2>サービスの特徴</h2>
<p>初心者でも使いやすく、短時間で基本操作を覚えられます。</p>このように、pタグは本文の段落に使います。見出し、リスト、ボタン、引用など、別の役割を持つ内容には、それぞれに合ったタグを使うことが大切です。
見た目を変えたい場合は、HTMLではなくCSSを使います。CSSとは、文字の大きさ、色、余白、配置などを調整するための言語です。たとえば、段落の余白を広げたい場合でも、pタグを何個も追加するのではなく、CSSで調整します。
p {
margin-bottom: 24px;
}このように、HTMLでは文章の役割を決め、CSSで見た目を整えると、分かりやすく保守しやすいコードになります。保守とは、後から修正したり改善したりする作業のことです。
通常の説明文や本文ではpタグを使います
pタグが向いている代表的な場面は、読者に自然な文章として読ませたい本文です。ブログ記事の本文、会社紹介、利用規約の説明、フォームの補足文、エラーメッセージの説明などは、pタグで書くことが多いです。
たとえば、フォームの入力欄の下に説明文を入れる場合、次のようにpタグを使えます。
<label for="email">メールアドレス</label>
<input id="email" type="email">
<p>入力されたメールアドレス宛に確認メールを送信します。</p>このpタグの文章は、入力欄についての補足説明です。普通の文章として読ませる内容なので、pタグが適しています。
一方で、改行や空白をそのまま見せたい内容にはpタグは向いていません。pタグの中で改行しても、ブラウザ上では基本的にその改行は反映されません。HTMLでは、連続した空白や改行は1つの空白として扱われるためです。
<p>
1行目の文章
2行目の文章
3行目の文章
</p>このように書いても、画面では1行の文章のように表示される場合があります。通常の文章ではそれで問題ありませんが、行の位置や空白に意味がある内容を見せたい場合は、preタグなど別の方法を選びます。
pタグは、文章を自然に折り返して表示する点でも便利です。画面幅が狭いスマートフォンでは、ブラウザが自動的に文章を折り返してくれます。折り返しとは、画面の横幅に合わせて文章が次の行へ移動することです。通常の本文では、この自動的な折り返しが読みやすさにつながります。
pタグを使う場面では、「この内容は読者が文章として読むものか」を基準にすると判断しやすくなります。文章として自然に読ませる内容であればpタグを使い、文字の並びや空白をそのまま見せたい内容であれば別のタグを検討します。
preタグが向いている表示内容
preタグは、入力した空白や改行をそのまま画面に表示したい内容に向いています。HTMLでは通常、連続した空白や改行は自動的に整理されますが、preタグを使うと書いた形を保ったまま表示できます。文章の意味だけでなく、文字の位置や行の並びにも意味がある場合に役立ちます。
コードやコマンドの表示に向いています
preタグがよく使われる場面の1つは、プログラムのコードやコマンドを表示するときです。コードとは、コンピューターに処理を伝えるための命令文のことです。プログラミングでは、改行やインデントが読みやすさに大きく関わります。インデントとは、行の先頭に空白を入れて構造を分かりやすくする書き方です。
たとえば、次のようなJavaScriptのコードをWebページ上で紹介したい場合、preタグを使うと行の並びを保てます。
<pre>
function greet(name) {
console.log("こんにちは、" + name + "さん");
}
</pre>このように書くと、関数の中身が字下げされた状態で表示されます。関数とは、特定の処理をまとめて名前を付けたものです。コードは字下げによって処理のまとまりを判断しやすくなるため、preタグで形を保って表示する意味があります。
コマンドの表示にもpreタグは向いています。コマンドとは、ターミナルやコマンドプロンプトと呼ばれる画面で、コンピューターに操作を指示する文字列のことです。
<pre>
npm install
npm run dev
</pre>この例では、2つのコマンドを別々の行として見せています。pタグで同じ内容を書くと、改行が期待どおりに表示されないことがあるため、手順を分かりやすく示したいときにはpreタグが便利です。
ただし、コードを表示するときは、preタグだけでなくcodeタグを組み合わせることもあります。codeタグは、内容がプログラムのコードであることを示すためのタグです。preタグが「形を保つ」役割を持つのに対して、codeタグは「コードである」という意味を補います。
<pre><code>
const message = "HTMLを学びましょう";
console.log(message);
</code></pre>このように組み合わせると、コードの意味と表示形式の両方を表せます。
空白や改行に意味があるテキストに向いています
preタグは、コード以外にも空白や改行に意味があるテキストに向いています。たとえば、表のように文字をそろえて見せたい内容、ログ、設定ファイル、詩、アスキーアートなどです。アスキーアートとは、文字や記号を並べて絵のように見せる表現です。
通常のHTMLでは、複数の半角スペースを入力しても、画面上では1つの空白として表示されます。そのため、文字の位置をそろえて見せたい場合にpタグを使うと、思ったような表示にならないことがあります。
<pre>
商品名 価格
りんご 120円
バナナ 150円
オレンジ 180円
</pre>この例では、商品名と価格の位置を空白でそろえています。preタグを使うことで、入力した空白がそのまま反映され、簡単な一覧として見せることができます。
ログを表示する場合にもpreタグは便利です。ログとは、システムの動きや処理結果を記録した情報のことです。ログは時刻や状態が行ごとに並ぶことが多く、改行を保って表示したほうが読みやすくなります。
<pre>
2026-06-17 10:00 起動しました
2026-06-17 10:01 データを読み込みました
2026-06-17 10:02 処理が完了しました
</pre>このような内容は、通常の文章として読むよりも、行ごとに確認するほうが理解しやすいです。preタグを使うことで、記録された形を崩さずに表示できます。
長い通常文章には使いすぎないようにします
preタグは便利ですが、通常の説明文や記事本文をすべてpreタグで囲む使い方はおすすめしません。preタグは入力した形を保つ性質があるため、文章が画面幅に合わせて自然に折り返されにくい場合があります。折り返しとは、画面の横幅に合わせて文章が次の行へ移動することです。
たとえば、長い説明文をpreタグで表示すると、横方向に長くなり、スマートフォンでは読みにくくなることがあります。横スクロールが必要になると、読者は文章を追いにくくなります。
<pre>
この文章は通常の説明文ですが、preタグで囲むと入力した形が優先されるため、画面幅によっては読みづらくなる場合があります。
</pre>通常の説明文であれば、pタグを使うほうが自然です。
<p>この文章は通常の説明文なので、pタグで表示すると読みやすくなります。</p>preタグは、「見た目を少し変えたいから使うタグ」ではありません。空白や改行をそのまま表示する必要があるときに使うタグです。見た目だけを変えたい場合は、CSSを使います。CSSとは、文字の大きさ、色、余白、背景などを調整するための言語です。
また、preタグの中に長いコードを書く場合は、横に長くなりすぎないように注意します。必要に応じてCSSで横スクロールを許可したり、行の折り返しを調整したりします。ただし、HTMLの学習段階では、まず「preタグは形を保って表示するタグ」と理解することが大切です。
preタグが向いているかどうかは、「空白や改行を画面上でも残す必要があるか」で判断できます。文章として読ませるだけならpタグを使い、行の並びや文字の位置まで見せたいならpreタグを選びます。
pタグとpreタグの表示の違い
pタグとpreタグは、どちらもHTMLでテキストを表示するために使えますが、ブラウザ上での見え方が異なります。pタグは通常の文章を読みやすく表示するために使い、preタグはHTMLに書いた空白や改行をできるだけそのまま表示するために使います。
pタグでは空白や改行が整理されます
pタグの中に文章を書くと、ブラウザは通常の段落として表示します。段落とは、文章の意味がひとまとまりになっている部分のことです。pタグは、ブログ記事、説明文、プロフィール文、商品説明など、自然な文章を読ませたい場面に向いています。
HTMLでは、pタグの中に複数の空白や改行を書いても、それらがそのまま画面に表示されるわけではありません。ブラウザは、連続した空白や改行を基本的に1つの空白として扱います。この動きを「空白の折りたたみ」と呼ぶことがあります。折りたたみとは、複数あるものを1つにまとめるような意味です。
<p>
HTMLでは、 複数の空白を入れても
画面では整理されて表示されます。
</p>このようにHTML側で空白を多く入れたり、途中で改行したりしても、画面では次のように近い表示になります。
HTMLでは、 複数の空白を入れても 画面では整理されて表示されます。つまり、pタグでは「HTMLファイル上でどう改行したか」よりも、「通常の文章としてどう読ませるか」が重視されます。文章が画面幅より長い場合は、ブラウザが自動的に折り返します。折り返しとは、横幅に収まらない文章が次の行に移ることです。
pタグは、読者が自然に文章を読めるように表示されます。スマートフォンのような幅の狭い画面でも、文章が画面に合わせて折り返されるため、本文の表示に向いています。
preタグでは入力した形が保たれます
preタグの中に書いたテキストは、空白や改行がそのまま表示されます。preは「preformatted text」の略で、整形済みテキストという意味があります。整形済みテキストとは、入力された形そのものに意味があるテキストのことです。
<pre>
HTMLでは、 複数の空白を入れると
画面でもその空白が残ります。
</pre>この場合、HTML上で入れた空白や改行は、ブラウザ上でも残ります。pタグでは整理されてしまう空白も、preタグでは見た目に反映されます。そのため、コード、コマンド、ログ、設定ファイル、文字で作った図などを表示するときに適しています。
preタグでは、一般的に等幅フォントで表示されます。等幅フォントとは、文字ごとの横幅がそろっているフォントのことです。たとえば、半角英数字や記号を使ったコードでは、文字の位置がそろっていると読みやすくなります。
<pre>
項目 値
name Taro
age 20
city Tokyo
</pre>このような表示では、空白の数によって列の位置をそろえています。preタグを使うことで、項目と値の位置関係を崩さずに見せられます。
ただし、preタグは文章を画面幅に合わせて自然に折り返す用途にはあまり向いていません。入力した形を保つ性質があるため、長い1行があると横に長く表示されることがあります。画面幅が狭い場合は横スクロールが必要になり、読みにくくなることがあります。
見た目の差はタグの意味の差から生まれます
pタグとpreタグの表示の違いは、単なるデザインの違いではありません。それぞれのタグが持つ意味の違いから生まれます。HTMLでは、タグを使って「この内容は何を表しているのか」を示します。これを構造化といいます。構造化とは、情報の役割を分かりやすく整理することです。
pタグは、文章の段落を表します。そのため、ブラウザは通常の文章として読みやすく表示します。空白や改行は整理され、画面幅に合わせて自然に折り返されます。
preタグは、整形済みテキストを表します。そのため、ブラウザは入力された空白や改行を保ったまま表示します。文字の位置、行の並び、空白の量に意味がある内容に向いています。
次のように、同じ文字を入れても表示結果は変わります。
<p>りんご 100円
バナナ 150円</p>
<pre>りんご 100円
バナナ 150円</pre>pタグでは空白や改行が整理されるため、表のようには見えにくくなります。preタグでは入力した空白や改行が残るため、文字の位置をそろえた表示ができます。
この違いを理解すると、タグを見た目だけで選ばなくなります。通常の本文はpタグ、入力した形を残したいテキストはpreタグという基準で考えると、HTMLの構造が自然になります。Webページを作るときは、「読ませる文章なのか」「形を見せるテキストなのか」を基準に選ぶことが大切です。
空白や改行の扱い方
HTMLでは、空白や改行の扱いを理解することが大切です。pタグとpreタグの違いは、文章の意味だけでなく、空白や改行が画面にどのように表示されるかにも表れます。通常の文章ではpタグを使い、空白や改行をそのまま見せたい内容ではpreタグを使うと判断しやすくなります。
pタグでは連続した空白や改行が1つに整理されます
pタグの中では、複数の空白や改行をHTMLに書いても、ブラウザ上ではそのまま表示されません。ブラウザとは、Webページを表示するためのソフトのことで、ChromeやSafariなどがあります。HTMLでは通常、連続した半角スペース、タブ、改行は1つの空白として扱われます。
たとえば、次のようにHTMLを書いたとします。
<p>
HTMLでは、 空白をたくさん入れても
画面では整理されて表示されます。
</p>この場合、画面では「空白をたくさん入れた位置」や「HTML上の改行」がそのまま反映されるわけではありません。文章として読みやすいように、余分な空白や改行が整理されます。
pタグは、段落を表すためのタグです。段落とは、文章の意味がひとまとまりになっている部分のことです。そのため、pタグでは「どこで改行したか」よりも、「どの文章が1つの段落なのか」が重要になります。HTMLファイルを見やすくするために途中で改行しても、画面上の改行とは別のものとして考えます。
画面上で明示的に改行したい場合は、brタグを使う方法があります。brタグは、文章の途中で改行を入れるためのタグです。ただし、通常の文章で何度もbrタグを使って余白を作るのはおすすめしません。余白を作りたい場合はCSSを使うほうが適切です。CSSとは、文字の色、余白、サイズ、配置などの見た目を整えるための言語です。
<p>1行目の文章です。<br>2行目の文章です。</p>この例では、brタグの位置で画面上の改行が入ります。住所や詩の一部など、文章の流れの中で改行そのものに意味がある場合に使うと自然です。
preタグでは空白や改行が入力した形で残ります
preタグの中では、HTMLに書いた空白や改行がそのまま画面に表示されます。preは「preformatted text」の略で、整形済みテキストという意味です。整形済みテキストとは、空白や改行を含めた文字の配置に意味があるテキストのことです。
たとえば、次のように書いた場合、行の並びや先頭の空白が表示に反映されます。
<pre>
1行目
2行目は前に空白があります
3行目
</pre>このように、preタグでは2行目の前にある空白が画面上でも残ります。pタグでは同じように書いても、空白や改行は整理されるため、期待した見た目にならないことがあります。
preタグは、コード、コマンド、ログ、設定ファイル、アスキーアートなどに向いています。ログとは、システムの動作や処理結果を時系列で記録した情報です。アスキーアートとは、文字や記号を並べて絵や図のように見せる表現です。これらは行ごとの位置や空白の数が見やすさに関わるため、preタグで表示すると内容を崩さずに見せられます。
<pre>
2026-06-17 09:00 Start
2026-06-17 09:01 Loading
2026-06-17 09:02 Complete
</pre>このようなログは、1行ごとに意味が分かれているため、改行が残ることで読みやすくなります。通常の文章として1行にまとめられると、どこで処理が分かれているのか分かりにくくなります。
preタグの注意点として、長い1行があると横に広がりやすいことがあります。スマートフォンなど画面幅が狭い環境では、横スクロールが必要になる場合があります。そのため、通常の説明文をpreタグで囲むのではなく、空白や改行を保つ必要がある内容だけに使うことが大切です。
空白や改行を見た目調整に使わないようにします
HTMLを書くときに、見た目を整えるためだけに空白や改行をたくさん入れたくなることがあります。しかし、HTMLでは空白や改行をデザイン調整の手段として使うのではなく、内容の意味に合ったタグを選び、見た目はCSSで整えるのが基本です。
たとえば、段落と段落の間を広げたい場合、空のpタグやbrタグを何個も入れる方法は避けたほうがよいです。
<p>最初の文章です。</p>
<br>
<br>
<p>次の文章です。</p>このような書き方でも見た目上は余白ができる場合がありますが、HTMLの構造としては分かりにくくなります。余白はCSSのmarginを使って調整します。marginとは、要素の外側に作る余白のことです。
p {
margin-bottom: 24px;
}このようにCSSで指定すると、段落の下に一定の余白を作れます。HTMLでは「ここは段落です」と意味を表し、CSSでは「どのくらい余白を空けるか」を決めると、コードの役割が分かりやすくなります。
また、文字の位置をそろえたいだけのためにpタグ内へ大量の空白を入れても、ブラウザ上では整理されるため効果が出にくいです。位置をそろえたい内容が表であればtableタグを使う選択肢もあります。tableタグは、行と列でデータを整理して表示するためのタグです。コードやログのように文字の形をそのまま見せたい場合はpreタグが向いています。
空白や改行の扱いでは、「文章として自然に読ませたいのか」「入力した形をそのまま見せたいのか」を考えることが重要です。pタグでは空白や改行が整理され、preタグでは空白や改行が残ります。この性質を理解しておくと、表示結果が思ったものと違う原因を見つけやすくなります。
コード例で見るpタグとpreタグの使い分け
pタグとpreタグの違いは、実際のコードで比較すると理解しやすくなります。同じテキストを書いても、pタグでは通常の文章として整理され、preタグでは空白や改行を含めた入力内容がそのまま表示されます。ここでは、文章、コード、コマンド、ログの例を使って、どちらを選ぶべきかを確認します。
通常の説明文ではpタグを使います
読者に文章として読ませたい内容には、pタグを使います。pタグは段落を表すタグです。段落とは、文章の意味がひとまとまりになっている部分のことです。ブログ記事の本文、サービス説明、プロフィール文、注意書きなどは、基本的にpタグで表現します。
たとえば、HTMLの説明文を書く場合は次のようにします。
<p>HTMLは、Webページの構造を作るための言語です。</p>
<p>見出しや段落、画像、リンクなどをタグで表すことができます。</p>この例では、2つのpタグを使って文章のまとまりを分けています。ブラウザでは、それぞれが段落として表示されます。ブラウザとは、Webページを表示するためのソフトのことで、ChromeやSafariなどがあります。
pタグの中で改行や複数の空白を入れても、画面上では基本的に整理されます。
<p>
HTMLは、 Webページの構造を作るための言語です。
タグを使って意味を表します。
</p>このように書いても、HTML上の改行や余分な空白がそのまま表示されるわけではありません。通常の文章では、ブラウザが画面幅に合わせて自然に折り返してくれるため、pタグのほうが読みやすくなります。折り返しとは、文章が画面の横幅に収まらないときに、次の行へ移ることです。
文章の途中でどうしても改行を入れたい場合は、brタグを使います。brタグは、文章の途中に改行を入れるためのタグです。ただし、段落同士の余白を作る目的でbrタグを何度も使うのはおすすめしません。余白はCSSで調整します。CSSとは、文字の大きさ、色、余白などの見た目を整えるための言語です。
<p>東京都千代田区<br>サンプルビル3階</p>住所のように、行を分けること自体に意味がある場合は、brタグを使うと自然です。通常の本文であれば、文章のまとまりごとにpタグを分けることを優先します。
コードやコマンドではpreタグを使います
プログラムのコードやコマンドを表示したい場合は、preタグが向いています。preタグは、入力した空白や改行をそのまま表示するタグです。コードでは、改行やインデントが読みやすさに大きく関わります。インデントとは、行の先頭に空白を入れて、処理のまとまりを分かりやすくする書き方です。
たとえば、JavaScriptのコードを表示する場合は次のように書きます。
<pre><code>
function hello(name) {
console.log("こんにちは、" + name + "さん");
}
</code></pre>この例では、preタグで空白や改行を保ち、codeタグで「これはコードです」という意味を示しています。codeタグは、プログラムのコードや命令文を表すためのタグです。preタグだけでも見た目は保てますが、コードであることをHTMLの意味として示したい場合は、codeタグを組み合わせると分かりやすくなります。
コマンドを複数行で表示したい場合も、preタグが便利です。
<pre><code>
npm install
npm run dev
</code></pre>このように書くと、2つのコマンドが別々の行として表示されます。pタグで書くと、改行が整理されて1行のように表示される場合があります。手順を示す場面では、行が分かれていることが重要になるため、preタグを使うほうが適しています。
短いコードを文章の途中に入れる場合は、preタグではなくcodeタグだけを使うこともあります。
<p>JavaScriptでは、変数を作るときに<code>const</code>を使えます。</p>この例では、文章全体はpタグで表し、コード部分だけをcodeタグで示しています。複数行のコードならpreタグとcodeタグの組み合わせ、文章中の短いコードならcodeタグのみ、という使い分けが実用的です。
表示結果を予測してタグを選びます
pタグとpreタグを選ぶときは、書いたHTMLが画面でどのように表示されるかを予測することが大切です。同じ内容でも、タグによって見え方が変わります。
たとえば、次のように商品名と価格をそろえて書いたとします。
<p>
商品名 価格
りんご 120円
バナナ 150円
</p>pタグでは、空白や改行が整理されるため、商品名と価格の位置がそろって見えない可能性があります。pタグは通常の文章を表示するためのタグなので、文字の位置を空白で調整する用途には向いていません。
同じ内容をpreタグで書くと、空白や改行が残ります。
<pre>
商品名 価格
りんご 120円
バナナ 150円
</pre>この場合、入力した形が保たれるため、簡単な一覧として表示できます。ただし、商品データのように行と列で意味を整理したい場合は、tableタグを使う選択肢もあります。tableタグは、表形式のデータを行と列で表すためのタグです。preタグは、あくまで文字の形をそのまま見せたいときに使います。
ログの表示にもpreタグは適しています。ログとは、システムの処理内容や結果を記録したものです。
<pre>
2026-06-17 09:00 起動しました
2026-06-17 09:01 データを読み込みました
2026-06-17 09:02 処理が完了しました
</pre>ログは1行ごとに情報が分かれているため、改行が残ることで読みやすくなります。pタグで表示すると、行の区切りが分かりにくくなる場合があります。
タグを選ぶ基準は、見た目を少し変えたいかどうかではありません。通常の文章として読ませるならpタグ、入力した空白や改行を保って見せるならpreタグを使います。短いコードだけを文章中に入れるならcodeタグを使い、複数行のコードではpreタグとcodeタグを組み合わせると整理しやすくなります。
実務で迷わないための選び方
pタグとpreタグを実務で使い分けるときは、見た目だけで判断せず、テキストの役割を基準に考えることが大切です。通常の文章として読ませたい内容にはpタグを使い、空白や改行を含めた形そのものを見せたい内容にはpreタグを使います。
文章として読ませる内容はpタグを選びます
実務で最もよく使うのはpタグです。Webサイトの本文、サービス説明、ニュース記事、注意書き、プロフィール文、フォームの補足説明など、読者が自然な文章として読む内容にはpタグが向いています。pタグは段落を表すタグで、段落とは意味がひとまとまりになった文章のかたまりです。
たとえば、サービス紹介ページでは次のように書きます。
<h2>サービスの特徴</h2>
<p>このサービスは、初めてWeb制作を学ぶ方でも使いやすいように設計されています。</p>
<p>基本操作を順番に確認しながら、HTMLとCSSの役割を理解できます。</p>この例では、見出しにはh2タグを使い、本文にはpタグを使っています。h2タグは見出しを表すタグで、pタグは本文の段落を表すタグです。HTMLでは、内容の意味に合ったタグを選ぶことが重要です。
実務では、後から別の人がコードを読むことも多いです。そのため、pタグを本来の意味で使っておくと、「ここは文章の段落だ」とすぐに分かります。チームで制作する場合や、後から修正する場合にも扱いやすくなります。
pタグを使うと、ブラウザが画面幅に合わせて文章を自然に折り返します。ブラウザとは、Webページを表示するためのソフトのことで、ChromeやSafariなどがあります。折り返しとは、文章が横幅に収まらないときに次の行へ移ることです。スマートフォンのような狭い画面でも読みやすく表示されやすいため、通常の本文にはpタグが適しています。
形を保つ必要がある内容はpreタグを選びます
preタグは、入力した空白や改行をそのまま表示したいときに選びます。preは「preformatted text」の略で、整形済みテキストという意味です。整形済みテキストとは、文字の並び、空白、改行などの形に意味があるテキストのことです。
実務では、コード例、コマンド例、ログ、設定ファイル、エラーメッセージの詳細などを表示するときにpreタグを使うことがあります。たとえば、開発者向けのドキュメントや社内マニュアルでコマンドを案内する場合です。
<pre><code>
npm install
npm run build
</code></pre>この例では、preタグで改行を保ち、codeタグで内容がコードやコマンドであることを示しています。codeタグは、プログラムのコードやコマンドを表すためのタグです。preタグは表示の形を保つ役割、codeタグは内容の意味を示す役割と考えると分かりやすいです。
ログを見せる場面でもpreタグは役立ちます。
<pre>
[INFO] サーバーを起動しました
[INFO] データベースに接続しました
[ERROR] 認証に失敗しました
</pre>ログは1行ごとに情報が分かれているため、改行を保つことで読みやすくなります。pタグで表示すると、行の区切りが分かりにくくなる場合があります。
ただし、preタグは通常の長い説明文には向いていません。長い1行があると横に広がりやすく、スマートフォンでは横スクロールが発生することがあります。横スクロールとは、画面の左右に移動して隠れた内容を見る操作のことです。読者が文章を読む負担が増えるため、本文にはpタグを使うのが基本です。
見た目の調整はCSSで行います
実務では、「pタグだと余白が少ないからpreタグにする」「preタグの見た目がコードっぽいから通常の文章にも使う」といった選び方は避けます。HTMLは内容の意味を表し、CSSは見た目を調整するために使います。CSSとは、文字の色、余白、サイズ、背景、配置などを指定するための言語です。
たとえば、段落の下に余白を増やしたい場合は、HTMLで空のタグを追加するのではなく、CSSで調整します。
<p>最初の説明文です。</p>
<p>次の説明文です。</p>p {
margin-bottom: 24px;
}marginとは、要素の外側に作る余白のことです。このようにCSSで余白を設定すると、HTMLの構造を崩さずに見た目を整えられます。
preタグの見た目もCSSで調整できます。たとえば、コード例を見やすくするために背景色や余白を付けることがあります。
pre {
padding: 16px;
overflow-x: auto;
}paddingとは、要素の内側に作る余白のことです。overflow-xは、横方向にはみ出した内容の扱いを指定するCSSプロパティです。プロパティとは、CSSで「何を変更するか」を表す項目です。autoを指定すると、必要な場合だけ横スクロールが表示されます。
実務で迷ったときは、次の基準で判断すると整理しやすいです。
- 通常の文章、説明文、本文ならpタグ
- コード、コマンド、ログ、設定ファイルならpreタグ
- 文章中の短いコードならcodeタグ
- 複数行のコードならpreタグとcodeタグの組み合わせ
- 余白や文字サイズなどの見た目調整はCSS
HTMLでは、タグを「見た目を作る道具」としてだけ使うのではなく、「内容の意味を伝える道具」として選ぶことが大切です。pタグとpreタグの違いを理解しておくと、読みやすく、修正しやすいHTMLを書けるようになります。
まとめ
HTMLのpタグとpreタグは、どちらもテキストを表示するために使いますが、目的が異なります。pタグは通常の文章を段落として表示するためのタグで、preタグは空白や改行を含めた入力内容の形を保って表示するためのタグです。見た目だけで選ぶのではなく、テキストが持つ意味や表示したい内容の性質に合わせて使い分けることが大切です。
pタグは通常の文章を読みやすく伝えるために使います
pタグは、Webページ上で本文や説明文を表示するときに使う基本的なタグです。pは段落を表し、段落とは意味がひとまとまりになった文章のかたまりを指します。ブログ記事、サービス紹介、商品説明、プロフィール、フォームの補足文など、読者が自然な文章として読む内容にはpタグが適しています。
pタグの中では、HTML上で複数の空白や改行を入れても、ブラウザ上では基本的に整理されて表示されます。ブラウザとは、Webページを表示するためのソフトのことで、ChromeやSafariなどがあります。HTMLでは通常、連続した空白や改行は1つの空白として扱われるため、pタグは「入力した形をそのまま見せる」ためのタグではありません。
<p>HTMLでは、通常の文章を段落として表示するときにpタグを使います。</p>
<p>意味のまとまりごとに段落を分けると、読みやすい文章構造になります。</p>このように、文章のまとまりごとにpタグを分けると、HTMLの構造が分かりやすくなります。構造とは、「ここは見出しです」「ここは段落です」「ここは一覧です」のように、内容の役割を整理することです。
pタグは、スマートフォンなど画面幅が狭い環境でも文章が自然に折り返されやすい特徴があります。折り返しとは、横幅に収まらない文章が次の行へ移ることです。通常の本文では、この自然な折り返しによって読みやすさが保たれます。
preタグは空白や改行をそのまま見せたいときに使います
preタグは、入力した空白や改行をそのまま画面に表示したいときに使います。preは「preformatted text」の略で、日本語では整形済みテキストと説明されます。整形済みテキストとは、文字の並び、空白、タブ、改行などの形そのものに意味があるテキストのことです。
preタグは、コード、コマンド、ログ、設定ファイル、文字で作った図などに向いています。コードとは、コンピューターに処理を伝えるための命令文です。ログとは、システムの動作や処理結果を記録した情報です。これらは行の区切りや空白の位置が読みやすさに関係するため、preタグを使うと内容を崩さずに表示できます。
<pre>
npm install
npm run dev
</pre>この例では、2つのコマンドが別々の行として表示されます。pタグで同じように書くと、改行が整理されて1行のように見える場合があります。手順や入力例を正確に伝えたい場合は、preタグのほうが適しています。
複数行のコードを表示するときは、preタグとcodeタグを組み合わせることもあります。codeタグは、内容がプログラムのコードであることを示すタグです。preタグは表示の形を保つ役割を持ち、codeタグはコードであるという意味を補います。
<pre><code>
function greet(name) {
console.log("こんにちは、" + name + "さん");
}
</code></pre>ただし、preタグは通常の長い文章には向いていません。入力した形を保つため、長い1行があると横に広がりやすく、スマートフォンでは横スクロールが必要になることがあります。通常の説明文にはpタグを使い、空白や改行を残す必要がある内容にだけpreタグを使うと分かりやすいです。
タグ選びでは意味と表示目的を分けて考えます
pタグとpreタグを使い分けるときは、「このテキストは文章として読ませたいのか」「空白や改行を含めた形を見せたいのか」を考えます。通常の説明文、本文、注意書きであればpタグが適しています。コード例、コマンド例、ログ、設定ファイルであればpreタグが適しています。
見た目を整えたいだけでタグを選ぶのは避けたほうがよいです。たとえば、段落の余白を広げたいからpreタグを使う、改行を増やしたいからbrタグを何度も入れる、という考え方はHTMLの構造を分かりにくくします。HTMLは内容の意味を表すために使い、見た目の調整はCSSで行います。
CSSとは、文字の色、サイズ、余白、背景、配置などを調整するための言語です。たとえば、段落の下に余白を作りたい場合は、pタグを増やすのではなく、CSSでmarginを指定します。marginとは、要素の外側に作る余白のことです。
p {
margin-bottom: 24px;
}preタグの見た目もCSSで調整できます。コード例を見やすくするために内側の余白を作ったり、横にはみ出したときだけスクロールできるようにしたりします。paddingとは、要素の内側に作る余白のことです。overflow-xは、横方向にはみ出した内容をどう扱うかを指定するCSSの項目です。
pre {
padding: 16px;
overflow-x: auto;
}実務では、通常の文章ならpタグ、形を保ちたいテキストならpreタグ、文章中の短いコードならcodeタグ、複数行のコードならpreタグとcodeタグの組み合わせ、という基準で考えると迷いにくくなります。pタグとpreタグの違いを理解しておくと、読みやすく、修正しやすく、意味の伝わりやすいHTMLを書けるようになります。
