catch-img

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

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

目次[非表示]

  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タグのいずれかを用いる必要があります。

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・CSS・JavaScript)入門5日-株式会社ジョブサポート

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

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

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

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

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

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

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

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

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

基本はpタグを使おう

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

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

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

オンライン・リモート講座(入門5日・基礎10日)-株式会社ジョブサポート

改行する際の注意点

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

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

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

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

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

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

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

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

Java短期講座(入門5日・基礎10日)-株式会社ジョブサポート

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

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

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

資料請求はこちらから

職場で使用されているアドレスをご記入下さい。

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