【初心者向け】HTMLの改行方法まとめ！brタグ・pタグ・preタグの正しい使い方

2025年06月12日
fvImg
HTMLで文章を書いていると、「ソースでは改行しているのに画面では改行されない」「brとpはどう使い分ければいいの？」と悩むことはありませんか？
HTMLでは見た目の改行とコード上の改行は別物であり、正しいタグを使わないとレイアウト崩れにつながることもあります。
本記事では、初心者向けに brタグ・pタグ・preタグの改行方法と役割の違いをわかりやすく解説します。

目次

改行とは？HTMLでの仕組み

HTMLでは、コード上の改行と見た目の改行は別物です。
例えば以下のようにソース上で文章を改行しても、ブラウザ上では1行として表示されます。

こんにちは、
HTMLの世界へようこそ！
表示結果

これはHTMLが、複数のスペースや改行を1つの空白として扱う仕様だからです。
では、HTMLで見た目通りに改行するにはどうすればよいのでしょうか？
本記事では、目的に応じた「3つの改行方法」を紹介します。

<br>タグでの改行方法（文章途中の改行）

文章の途中で1行だけ改行したい場合に使うのが<br>タグです。
<br>タグは改行したい場所に挿入するだけで、直後から新しい行が始まります。

こんにちは、<br>
HTMLの世界へようこそ！
表示結果
  • <br>は“break”の略で、改行を挿入するタグです
  • 閉じタグは不要です（XHTMLでは <br />が使われます）
  • 複数行改行したい場合は <br><br>と続けて書くことも可能ですが、多様は避けてCSSで調整しましょう

<p>タグでの改行方法（段落ごとの区切り）

HTMLで最も基本的な段落分けの方法が<p>タグです。
<p>タグは、段落ごとに自動的に前後にスペース（マージン）が入り、文章を読みやすく整形してくれます。

<p>これは1つ目の段落です。</p>
<p>これは2つ目の段落です。</p>
表示結果
  • <p>タグは文章のまとまり（段落）を表現するタグです
  • 自動で上下に余白がつくため自然なレイアウトになります
  • SEO対策としても効果的で、検索エンジンにとって構造化されたコンテンツと認識されやすくなります

<pre>タグでの改行（整形済みテキスト）

ソースコードや詩など、「入力した通りの改行や空白」をそのまま反映したい場合は<pre>タグが便利です。
<pre>タグ内では、スペースや改行がそのまま反映されます。ただし、通常の文章やブログ記事では<p>タグや<br>タグを使うのが一般的です。

<pre>
これは
インデントや
改行が
そのまま表示されます。
</pre>
表示結果
  • <pre>は “preformatted text” の略です
  • スペースや改行がそのまま表示されます
  • 通常の文章には向いていませんが、コード表示や整形詩などには最適です

SEO・ユーザビリティに配慮したタグの使い分け

HTMLでは、目的に応じてタグを正しく使い分けることが重要です。
特にSEO（検索エンジン最適化）やユーザビリティの観点からは、次のようなルールを意識しましょう。

  • 文章中の一時的な改行には<br>タグを使うが、多用すると音声読み上げソフトや検索エンジンにとって不自然になることがある
  • 段落には<p>タグを使うことで、検索エンジンに「意味ある構造」として正しく伝わる
  • コードや詩、整形済みテキストの表示には<pre>タグを使用すると、意図した通りの表示が可能

検索エンジンはページ内の構造を重視するため、タグの意味に沿って正しく使い分けることで、SEOにも効果的で見やすいWebページになります。

用途適切なタグ例
途中で改行するbrタグ1行目<br>2行目
段落ごとに分けるpタグ<p>文章のまとまり</p>
入力通り表示させるpreタグ<pre>
ソースコードなど
ここに書く
</pre>

よくある失敗例とその対策

失敗例：brタグや を多用してレイアウトを整える

▼NGコード

<p>タイトル<br><br><br>本文</p>

▼修正例

<p>タイトル</p>
<p class="space">本文</p>
  .space {
    margin-top: 20px;
  }

レイアウト調整は<br>ではなく CSSで制御しましょう

失敗例：pタグの入れ子や不適切な使い方

▼NGコード

<p>段落1<p>段落2</p></p>

これは一部のブラウザで自動的に補正されて表示されますが、仕様としては誤りです。

▼修正例

<p>段落1</p>
<p>段落2</p>

pタグは入れ子にできません。必ず閉じタグで区切りましょう。

失敗例：white-space: nowrap;により改行が効いていない

▼NGコード

<p>
  こんにちは、<br>
  HTMLの世界へようこそ！
</p>
<style>
  p {
    white-space: nowrap;
  }
</style>

このスタイルを適用すると、改行や空白が無効になります。
ただし、実際には<br>タグが効く場合もあります。ブラウザによって挙動が異なることがあるため、意図的に使用する場合以外は避けるべきです。

まとめ

HTMLでの改行や空白の入れ方には、brタグ、pタグ、preタグなど複数の方法があります。それぞれの役割を理解し、適切に使い分けることで、読みやすくSEOにも強いWebページを作成できます。特にpタグは段落分けの基本、brタグは行の途中の改行に使いましょう。

最終更新：