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

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

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の基本的な構造と要素を解説。タグの使い方もマスターしよう

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

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

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

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

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

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

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

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

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

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

基本はpタグを使おう

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

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

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

■関連記事

HTMLのリンクの張り方を若手、新人向けに解説。タグの使い方と注意点

改行する際の注意点

<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の観点からも、改行タグの連続使用は控えましょう。

■関連記事

プログラミング講座はオンラインで受講。法人研修サービスも人気

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

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

研修実績(短期講座Java、フロントエンド)はこちら

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