HTMLを書き始めたばかりの方の中には、 「Enterキーを押したのに改行されない」 と困った経験がある方も多いのではないでしょうか？
HTMLでは、テキストエディタのようにEnterキーだけで改行することはできません。改行を反映させるには、専用のHTMLタグを使用する必要があります。特にWeb制作では、「brタグ」と「pタグ」を使い分けながら改行する場面が多くあります。しかし、「brタグとpタグの違いがわからない」「どちらを使えばいいかわからない」「改行しすぎてレイアウトが崩れた」と悩む初心者の方も少なくありません。
この記事では、HTMLで改行する方法をサンプルコード付きで初心者向けにわかりやすく解説します。HTML学習中の方は、ぜひ参考にしてください。
関連記事：「HTMLタグ一覧【2026年最新】コピペで使える目的別リファレンス」
HTMLで改行するには？
HTMLで改行するには、brタグやpタグなどのHTMLタグを使って、改行や段落を明示する必要があります。テキストエディタ上でEnterキーを押して改行しても、ブラウザ上ではそのまま改行されない場合があります。
Enterキーだけでは改行されない理由
HTMLでは、コード内の改行や連続した空白は、ブラウザ上でそのまま表示されるとは限りません。たとえば、HTMLファイル内で以下のように改行しても、ブラウザでは1行の文章として表示されます。
<p>
HTMLで改行する
方法を解説します。
</p>
ブラウザ上で意図した位置に改行を表示したい場合は、改行用のタグを使う必要があります。
HTMLで改行する基本ルール
HTMLで改行したい場合は、文章の目的に合わせてタグを使い分けます。
文章の途中で改行したい場合はbrタグ、段落として文章を分けたい場合はpタグを使うのが基本です。見た目だけを整える目的で改行タグを多用すると、スマホ表示で崩れやすくなるため注意しましょう。
改行でよく使うHTMLタグ
HTMLの改行でよく使われるタグには、brタグ・pタグ・preタグがあります。
| タグ | 役割 | 主な使い方 |
| <br> | 文章の途中で改行する | 住所や短い文章を改行したいとき |
| <p> | 文章を段落として分ける | 文章のまとまりを分けたいとき |
| <pre> | 改行や空白をそのまま表示する | コードや整形済みテキストを表示したいとき |
それぞれ役割が異なるため、単に改行したいだけでなく、文章の意味や構造に合わせて使い分けることが大切です。
関連記事：「HTMLのaタグの色付け方法を初心者向けに解説｜CSSでリンク色を変更する方法」
＼満足度90%以上！／
オンラインプログラミングスクール忍者CODE
無料相談はこちら>
HTMLで改行する方法
HTMLで改行する方法には、主に「brタグ」「pタグ」「preタグ」の3種類があります。それぞれ役割や使い方が異なるため、文章の内容や表示したい形式に合わせて使い分けることが大切です。
brタグで改行する方法
brタグは、文章の途中で改行したい場合に使用するHTMLタグです。
HTMLで改行する方法を<br>
解説します。
上記のように「<br>」を入れると、その位置で改行されます。
住所や短い文章、歌詞など、特定の位置で改行したい場合によく使われます。
なお、brタグは終了タグが不要なHTMLタグです。
pタグで段落を分ける方法
pタグは、文章を段落として区切るためのHTMLタグです。
<p>HTMLで改行する方法を解説します。</p>
<p>brタグやpタグの使い方を学びましょう。</p>
上記のようにpタグで囲むことで、文章ごとに段落が分かれて表示されます。pタグは単なる改行ではなく、「文章のまとまり」を表すために使われます。そのため、記事本文や説明文など、意味ごとに文章を区切りたい場合に適しています。
preタグで改行をそのまま表示する方法
preタグは、HTML内の改行や空白をそのまま表示するタグです。
<pre>
HTMLで改行する方法を
そのまま表示できます。
</pre>
通常のHTMLでは無視される改行やスペースも、preタグ内ではそのまま表示されます。そのため、ソースコードや整形済みテキストを表示したい場合によく使用されます。
ただし、画面幅によっては自動改行されず、表示が崩れる場合があるため、通常の文章で多用するのは避けましょう。
関連記事：「HTMLのコメントアウト方法を解説｜ショートカットや複数行コメントも紹介」
brタグとpタグの違い
HTMLで改行するときによく使われるのが「brタグ」と「pタグ」です。
どちらも改行に関係するタグですが、役割や使い方には大きな違いがあります。文章の意味や構造に合わせて使い分けることが大切です。
brタグは文章途中で改行するときに使う
brタグは、文章の途中で改行したい場合に使用します。
お問い合わせはこちら<br>
TEL：00-0000-0000
このように、特定の位置で改行したい場合に使われます。
住所や電話番号、歌詞など、改行位置を固定したい文章によく使用されます。
brタグは「改行すること」が目的のHTMLタグです。
pタグは段落を分けるときに使う
pタグは、文章を段落として区切るためのHTMLタグです。
<p>HTMLで改行する方法を解説します。</p>
<p>brタグとpタグの違いを理解しましょう。</p>
上記のように、文章のまとまりごとに段落を分ける際に使用します。
pタグには段落という意味があり、文章構造を整理する役割があります。
そのため、記事本文や説明文などで使われることが多いタグです。
用途に応じて使い分けることが重要
brタグとpタグは、どちらも改行に関係するHTMLタグですが、役割は異なります。
| タグ | 役割 | 主な用途 |
| <br> | 文章途中の改行 | 住所・短文・歌詞など |
| <p> | 段落を分ける | 記事本文・説明文など |
改行だけを目的にpタグを使ったり、文章全体をbrタグだけで構成したりすると、HTML構造がわかりづらくなる場合があります。読みやすいWebページを作るためにも、用途に合わせて正しく使い分けましょう。
HTMLで改行する際の注意点
HTMLではbrタグを使って簡単に改行できますが、使い方を間違えると読みづらいページになる場合があります。特に、レイアウト調整目的で多用すると、スマホ表示で崩れる原因になるため注意が必要です。
brタグを連続使用しない
brタグを連続で使用すると、文章の間に大きな空白ができます。
文章を表示します。<br><br><br>
次の文章を表示します。
このような書き方でも改行はできますが、HTML構造がわかりづらくなります。
また、コードの可読性が下がる原因にもなるため、必要以上にbrタグを連続使用するのは避けましょう。
レイアウト調整目的では使わない
brタグは「改行」を目的としたHTMLタグです。そのため、余白を作ったり、位置を調整したりする目的で使用するのは推奨されていません。
<br><br><br>
このように空白を作るのではなく、余白調整はCSSで行うのが基本です。Web制作では、HTMLで構造を作り、CSSで見た目を調整する役割分担が重要になります。
スマホ表示で改行位置が崩れる場合がある
パソコン表示に合わせてbrタグを入れすぎると、スマホでは不自然な位置で改行される場合があります。
HTMLで改行する方法を<br>
初心者向けに解説します。
画面幅が狭いスマホでは、ブラウザ側の自動改行と重なり、文章が読みづらくなることがあります。そのため、文章途中の細かい改行を増やしすぎず、基本的にはブラウザの自動改行を活用することが大切です。
HTMLとCSSを効率良く学ぶ方法
HTMLはWebページの構造を作るための言語であり、CSSは見た目を整えるための言語です。改行タグの使い分けを理解するためにも、HTMLとCSSをあわせて学習することが重要になります。
実際にコードを書きながら学習する
HTMLやCSSは、実際にコードを書きながら学ぶことで理解しやすくなります。
たとえば、brタグやpタグを書き比べながら表示を確認すると、それぞれの違いを理解しやすくなります。Visual Studio Code（VSCode）などのエディタを使い、少しずつ手を動かしながら学習を進めていきましょう。
HTMLとCSSをセットで学ぶ
HTMLだけでは、Webページのデザインや余白調整はできません。
実際のWeb制作では、HTMLで構造を作り、CSSで見た目を整える形で使用されます。たとえば、文章間の余白はbrタグではなくCSSで調整することが一般的です。そのため、HTMLとCSSを並行して学ぶことで、より実践的なWeb制作スキルを身につけやすくなります。
独学が不安ならスクールもおすすめ
HTMLやCSSは初心者でも学びやすい言語ですが、「思った通りに表示されない」「エラー原因がわからない」と悩むことも少なくありません。
独学に不安がある場合は、質問できる環境があるプログラミングスクールを活用する方法もおすすめです。忍者CODEでは、HTMLやCSSの基礎から実践的なWeb制作まで学習できます。動画教材やチャットサポートを活用しながら、自分のペースで学習を進められるのが特徴です。
関連記事：「
まとめ
本記事では、HTMLで改行する方法について解説しました。
HTMLでは、Enterキーだけでは改行されず、brタグやpタグなどを使って改行を指定する必要があります。また、brタグは文章途中の改行、pタグは段落分けというように、それぞれ役割が異なります。さらに、brタグを連続使用するとレイアウト崩れの原因になる場合があるため、余白調整はCSSを使うことが重要です。HTMLとCSSを正しく使い分けることで、読みやすく管理しやすいWebページを作成できます。
ぜひ今回紹介したサンプルコードを参考にしながら、HTMLの改行方法を実際に試してみてください。
