ではなくを使うのはどんなときですか？

住所や詩のように、改行そのものが内容の一部であるときはを使います。段落が分かれるなら別々の要素を使い、間隔はを重ねるのではなく CSS の margin で空けます。

実行できるHTMLドキュメント: HTML 改行

Q: HTML で改行するにはどうすればいいですか？

新しい行を始めたい位置に を入れます: Line one Line two。HTML ファイルの中で Enter キーを押しても改行されません。ブラウザはソースの改行を普通の空白として扱うからです。

Q: 、 、 のどれで書くべきですか？

HTML ではどれも使え、同じ要素になります。 が素の HTML の書き方で、スラッシュ付きは XHTML や JSX との互換のために受け付けられています。 だけを書くのは無効ですが、ブラウザはもう 1 つの改行として読みます。

Q: ではなく を使うのはどんなときですか？

住所や詩のように、改行そのものが内容の一部であるときは を使います。段落が分かれるなら別々の 要素を使い、間隔は を重ねるのではなく CSS の margin で空けます。

Q: を追加せずにテキストの改行をそのまま表示するには？

要素に CSS で white-space: pre-line を指定します。ブラウザはテキスト内の改行をすべて改行として表示し、余分な空白はまとめたままにします。ユーザーのコメントや JavaScript で読み込んだテキストに便利です。

Q: HTML で改行させないようにするには？

テキストを white-space: nowrap を指定した要素で囲むか、2 つの単語を改行しない空白 でつなぎます。そうすると常に同じ行に並びます。

HTML の改行: br タグの使い方、改行コード、改行位置の指定

テキストの途中で改行するには を使います。 を使うべき場面と段落を使うべき場面、テキストの改行をそのまま表示する方法、 で長い単語を折り返す方法、改行させない方法を解説します。

このページのコードはエディタで実行できます - 編集してすぐに結果を確認できます。

著者 Kevin Spektor, Co-founder & CTO

公開日：Sep 24, 2026

改行の入れ方

新しい行を始めたい位置に   を置きます。空要素なので終了タグはありません。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line break</title>
</head>
<body>
  <p>
    Coddy Ltd.<br>
    12 Market Street<br>
    Springfield
  </p>
  <p>Pressing Enter in the source
     does not break the line.</p>
</body>
</html>

住所は   の位置でちょうど改行されます。2 つ目の段落は、ソースに改行があるのに 1 行のままです。HTML は改行、タブ、連続した空白を 1 つの空白として扱うからです。  があるのはそのためです。

 、 、  はどれも同じ要素になります。プロジェクトで使っている書き方に合わせましょう (JSX と XHTML ではスラッシュが必要です)。

br と p の違い: 改行は余白ではない

  は同じ段落の中で行を終えます。新しい  は新しい段落を始め、初期の margin によって上下に余白ができます。  を重ねて余白を作ることもできますが、崩れやすく、意味としても誤りです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>br vs p</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .box { border: 2px solid #e5e7eb; padding: 0 12px; margin-bottom: 12px; }
    .spaced p { margin: 0 0 24px; }
  </style>
</head>
<body>
  <div class="box">
    <p>With br tags:<br><br><br>Second paragraph?</p>
  </div>
  <div class="box spaced">
    <p>With two paragraphs and CSS margin:</p>
    <p>Second paragraph.</p>
  </div>
</body>
</html>

2 つの箱は似て見えますが、1 つ目はスクリーンリーダーにとって 1 つの段落で、余白を変えるにはすべてのページを編集することになります。2 つ目なら余白は CSS 1 行で決まります。

  が適しているのは、住所、詩や歌詞、署名の各行など、改行がテキストの一部である場合です。それ以外には段落、リスト、見出しを使いましょう。

テキストの改行をそのまま表示する

コメント欄、データベース、スクリプトなど別の場所から来たテキストには、  タグではなく本物の改行文字が含まれています。CSS の white-space: pre-line を使うと、ブラウザはその改行を改行として表示します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>pre-line</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .msg { border: 2px solid #e5e7eb; padding: 8px 12px; margin-bottom: 8px; }
    .keep { white-space: pre-line; border-color: #2563eb; }
  </style>
</head>
<body>
  <div class="msg" id="a"></div>
  <div class="msg keep" id="b"></div>
  <script>
    const text = 'Hi team,\nThe build is fixed.\nThanks!';
    document.getElementById('a').textContent = text;
    document.getElementById('b').textContent = text;
  </script>
</body>
</html>

同じ文字列が、グレーの箱では 1 行、青い箱では 3 行で表示されます。これは innerHTML でユーザーのテキストに   タグを組み込むより安全です。そうするとユーザーが HTML を埋め込めてしまうからです。空白やインデントも残したいなら white-space: pre を使います。詳しくは HTML の空白のページで解説しています。

長い単語を折り返す: wbr

空白のない長い単語や URL は、狭い箱からはみ出すことがあります。 は必要なら改行してよい位置を示し、必要がなければ何もしません。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wbr</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .narrow { width: 160px; border: 2px solid #f59e0b; padding: 4px; margin-bottom: 12px; }
  </style>
</head>
<body>
  <div class="narrow">example.com/docs/html/line-break-tag</div>
  <div class="narrow">example.com/<wbr>docs/<wbr>html/<wbr>line-break-tag</div>
</body>
</html>

1 つ目のパスは箱からはみ出し、2 つ目は  の位置で改行されます。自分で管理できないテキストには、CSS の overflow-wrap: anywhere を使うと、長い単語をどこでも改行できます。

改行させない

逆に「10 km」や電話番号を途中で改行させたくないこともあります。方法は 2 つです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>No break</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .narrow { width: 170px; border: 2px solid #16a34a; padding: 4px; }
    .nowrap { white-space: nowrap; }
  </style>
</head>
<body>
  <p class="narrow">The race is exactly 10&nbsp;km long, call <span class="nowrap">+1 555 0100</span> to join.</p>
</body>
</html>

  はブラウザがそこで改行しない空白なので、「10」と「km」が離れません。white-space: nowrap は span 全体を 1 行に保ちます。  を普通の空白に変えるか、クラスを外すと、この幅ではどちらも 2 行に分かれます。

よくある間違い

ソースで Enter キーを押して改行されると思う。 HTML の改行は空白になります。 、別々の要素、white-space: pre-line のどれかを使いましょう。
余白のために   を重ねる。 段落と margin を使いましょう。
  でリストを作る。 <ul> や <ol> と <li> を使いましょう。スクリーンリーダーがリストとして読み上げます。
 と書く。 正しくありません。  と書きましょう。
innerHTML でユーザーのテキストに   を追加する。 代わりに textContent を設定し、white-space: pre-line を使いましょう。

よくある質問

HTML で改行するにはどうすればいいですか？

新しい行を始めたい位置に   を入れます: Line one Line two。HTML ファイルの中で Enter キーを押しても改行されません。ブラウザはソースの改行を普通の空白として扱うからです。

、 、 のどれで書くべきですか？

HTML ではどれも使え、同じ要素になります。  が素の HTML の書き方で、スラッシュ付きは XHTML や JSX との互換のために受け付けられています。 だけを書くのは無効ですが、ブラウザはもう 1 つの改行として読みます。

ではなく を使うのはどんなときですか？

住所や詩のように、改行そのものが内容の一部であるときは   を使います。段落が分かれるなら別々の  要素を使い、間隔は   を重ねるのではなく CSS の margin で空けます。

を追加せずにテキストの改行をそのまま表示するには？

要素に CSS で white-space: pre-line を指定します。ブラウザはテキスト内の改行をすべて改行として表示し、余分な空白はまとめたままにします。ユーザーのコメントや JavaScript で読み込んだテキストに便利です。

HTML で改行させないようにするには？

テキストを white-space: nowrap を指定した要素で囲むか、2 つの単語を改行しない空白   でつなぎます。そうすると常に同じ行に並びます。