catch-img

HTMLで改行するためのbrタグとpタグの使い方。注意点も解説

HTMLでは、主にpタグとbrタグが、改行するためのタグとして用いられます。しかし、それぞれの持つ本来の役割は全く異なるものであり、意味をしっかりと理解して使うことが重要です。正しい使い方や注意点などを紹介します。エンジニア以外の方でもHPの文言修正などに活用できるため役に立つと思います。

ジョブサポートのフロントエンド(HTML5・CSS・JavaScript)入門5日講座はこちら

目次[非表示]

  1. 1.HTMLで改行する方法は3パターン
    1. 1.1.pタグの使用
    2. 1.2.brタグの使用
    3. 1.3.preタグを使用する
  2. 2.pタグとbrタグは何が違う?
    1. 2.1.pタグは段落、brタグは改行
    2. 2.2.ブラウザでの表示のされ方
    3. 2.3.基本はpタグを使おう
  3. 3.改行する際の注意点
    1. 3.1.改行タグはバージョンによって違うことも
    2. 3.2.改行タグは連続で使わない
  4. 4.適切な改行でWebページのデザインを整えよう

HTMLで改行する方法は3パターン

HTMLのソースコードで改行しても、ブラウザ上でコード側の改行は反映されません。ブラウザに改行を反映させるには、pタグ・brタグ・preタグのいずれかを用いる必要があります。

全国の若手~ベテランエンジニアが受講している個別指導のオンライン・リモート講座(入門5日・基礎10日)はこちら

pタグの使用

HTMLで改行する場合に、最もオーソドックスかつ使用を推奨されている方法が、pタグの使用です。以下のように、開始タグと終了タグで囲んで使います。

<p>プログラミングの学習で大事なこと</p>
<p>見やすいサイトに仕上げることを意識する</p>
<p>アウトプットを繰り返すことが重要</p>

brタグの使用

改行したい箇所がある場合、その位置にbrタグを挿入すると、brタグの直前で改行されます。

<p>SEO効果を狙ったサイト作成<br>
小手先のテクニックのみに頼らない<br>
ユーザーを満足させる内容を目指す</p>

なお、改行タグとして<br />を使用しているWebサイトがあります。このタグは、以前開発されていたXHTMLで定義されていた改行タグです。

Webサイトの作成は、主要ブラウザに対応しているHTML5を使うことが推奨されているため、改行タグもHTML5の<br>を用いましょう。

preタグを使用する

preタグで文章を囲むと、ソースコード側の改行がブラウザにも反映されます。

<pre>プログラムを効果的に勉強する方法
スクールに通いメンターに師事する
オンライン講座を受講する</pre>

このように、brタグを挿入しなくても改行がそのまま反映されます。

ただし、preタグを使うと、画面端で自動改行されずに文が切れてしまう可能性があり、スマホでも表示させたいWebページには向きません。できるだけ使わないようにしましょう。

■関連記事

  HTMLの基本的な構造と要素を解説。タグの使い方もマスターしよう | Java・フロントエンド研修のジョブサポート HTMLを学習するにあたっては、基本的な構造と要素から理解した方が習得も早く、深く理解できるようになります。基礎構造となる3つのポイントと、タグの使い方について解説しますので、ぜひマスターしてみてください。 Java・フロントエンド研修のジョブサポート


pタグとbrタグは何が違う?

pタグとbrタグはどちらも改行で使えますが、タグ自体に与えられた意味は異なります。それぞれの意味を知り、HTMLではpタグが推奨されていることを覚えておきましょう。

フロントエンド(HTML5・CSS・JavaScript)入門5日講座はこちら

pタグは段落、brタグは改行

pタグは、文章全体を段落で区切り、読みやすくするために使うタグです。従って、pタグは改行させるために使うタグではないともいえます。

一方、brタグは、文章を途中で強制的に区切り、改行させるためのタグです。二つのタグにおける、本質的な意味の違いを押さえておきましょう。

段落とは、文章を主題ごとに区切ったまとまりです。pタグを使うことで、文章の流れをつかみやすくなり、結果的にユーザーにとって読みやすいページになります。

ブラウザでの表示のされ方

pタグで段落を区切ると、ブラウザでは段落として処理されCSSで指定していれば余白ができます。一方、brタグを挿入した場合、ブラウザでは挿入位置で改行されるだけです。

brタグが単純に改行のみを目的としているのに対し、pタグは主題ごとに文章をまとめることを目的としています。

基本はpタグを使おう

HTMLでは、構造上の理由などにより、pタグの使用を推奨しています。改行のみを目的としたbrタグは、どうしても段落内で改行したい場合のみ使うようにしましょう。

brタグはHTMLで非推奨とされていることから、SEOを意識したWebページを作成する場合は、多用しすぎないように気を付けることが重要です。

ブラウザでの表示のされ方にも、両者の違いが表れることがあります。スマホなどではbrタグの改行にズレが生じることがあるため、スマホでも表示させたいWebページを作る際は注意が必要です。

■関連記事

  HTMLのリンクの張り方を若手、新人向けに解説。タグの使い方と注意点 | Java・フロントエンド研修のジョブサポート Webページからアクセスできる情報資源を参照可能にするために、リンクの設定は欠かせない技術といえます。リンクの貼り方を覚えれば、ユーザーにとってより便利なページを作成できるでしょう。タグの使い方やデザインの変更方法などを解説します。 Java・フロントエンド研修のジョブサポート


改行する際の注意点

<br>と<br />の違いや、改行タグを連続で使用することの危険性など、HTMLで改行する際に気を付けたいポイントを解説します。特に、<br>の扱いには注意が必要です。

全国の若手~ベテランエンジニアが受講している個別指導のオンライン・リモート講座(入門5日・基礎10日)資料ダウンロードはこちら

改行タグはバージョンによって違うことも

上述したように、brタグは、<br>のほかに<br />が使われることもあります。<br />は、XHTML1.0などで改行タグとして指定されているものです。

一方、HTML4.01やHTML5では、<br>を使うことになっています。どちらも改行で使用できるタグですが、現在Webページの作成において推奨されているHTML5に準じ、改行タグも<br>を使うのが無難です。

改行タグは連続で使わない

<br>タグを2連続で使うと、ブラウザ上では1行分の空白行ができたような表示になります。pタグを使用して自然にできる改行の様子と見た目は同じです。

特に、HTML初心者は、無理に段落を作ろうとして、改行タグを連続で使いがちです。しかし、この方法は<br>の本来の使い方ではないため、できるだけ避けるようにしましょう。

タグ本来の目的を意識するなら、空白はCSSで空きを調整して作るのが正解だといえます。googleは改行タグの連続使用で体裁を整えることを良しとしていないため、SEOの観点からも、改行タグの連続使用は控えましょう。

■関連サイト

  フロントエンド(HTML5・CSS・JavaScript)入門5日講座-ジョブサポート フロントエンド(HTML5・CSS・JavaScript)入門5日講座は通学で基礎力強化します。スキルチェンジ、基礎から学びたい方向けの講座です。貴社の希望開始日、オンライン受講の選択も可能です。Java・フロントエンド研修はジョブサポートにお任せください。 Java・フロントエンド研修のジョブサポート


適切な改行でWebページのデザインを整えよう

HTMLが改行で使用を推奨しているのはpタグです。brタグの多用を控えるためにも、それぞれの意味をしっかりと理解する必要があります。

タグ本来の目的を押さえ、適切な使い方ができれば、自然にデザインも整っていくでしょう。無理に体裁を繕おうとせず、きちんとした使用方法を意識することが重要です。

若手、新人エンジニアの成長を阻む 人材育成5つの失敗と解決策はこちら

法人研修の実績2500名以上!若手、新人エンジニア採用後

Java研修はジョブサポートお任せ下さい


ジョブサポートでは通年開講で貴社の希望開始日に合わせたJava研修(通学、オンライン・リモート講座)を行っています。助成金を活用すれば費用負担を軽減して研修受講ができるのため若手、新人エンジニア採用計画と合わせてご検討下さい。

新人・若手エンジニアの基礎知識、ビジネススキルを強化

プロエンジニア育成コース(Java研修1~3ヶ月)


メールマガジンの購読設定

ジョブサポートの最新情報をお届けするほか、

人事、採用教育担当者、若手エンジニア向けに

役立つ情報をお届けします。

アップロードしています。少々お待ちください。