段落タグ「p」と改行タグ「br」を正しく使い分ける

HTMLを使ってサイト制作を行う場合、最も使用頻度が多いのが<p>と<br />でしょう。<p>は段落を表し、<br />は改行を示すタグです。これらを正しく使い分けしないと、レイアウトが崩れてしまったり、無駄なソースを増やすことになるので気を付けましょう。

特に、行間を調整するときに、連続して<br />を使用する人は要注意です。これは、文法上では間違った使い方ですし、SEO対策としても良くないと言われています。初心者は間違えやすい部分だと思うので、必ず覚えておいてください。

 

段落と改行タグを正しく利用するべき理由

段落タグを使っても、改行タグを使っても、見た目の表示はほとんど変わりません。だから、誤用しても気づかない人が多いのですが、色々とデメリットがあります。具体的には、以下の3つが挙げられます。

  • ブラウザによってテキストの表示がずれる
  • 文章構造を正しく伝えられない
  • ソースが重くなってしまう

順に、詳しく見ていきましょう。

 

ブラウザによってテキストの表示がずれる

最も大きなデメリットがコレですね。改行タグを使用すると、ブラウザの横幅によって表示がずれることがあります。特に、最近はスマホからのアクセスが多くなっていますが、PCとスマホでは横幅が大きく異なるため、表示がおかしくなりがちです。

たとえば、<br />を使って文章を記述すると以下のようになります。

1

PCだと上のような表示になります。

2

しかし、スマホで表示すると、改行の位置がおかしくなっていますよね。

次に、<p>で記述した文章だと、以下の通りです。

3

これが、PCでの表示です。

4

スマホで表示しても、テキストがずれることなく表示されました。

以上のように、<p>を使ってマークアップすれば、どんなでブラウザで見たときにも違和感なくテキストが表示されるわけですね。

 

文章構造を正しく伝えられない

HTMLの本来の目的は、文章の構造をコンピュータに伝えることです。<br />は改行の意味しか持たないために、<br />を中心にテキストを記述すると文章の構造が分かりません。だから、<p>タグを使用して、どこに段落があるのかを明確にするのが正しい使い方というわけです。

正しくマークアップすることでSEOに直結するわけではありませんが、本来の使い方を重視した方が良いですよね。検索エンジンに対しても的確にサイト情報を通知できますから、色々なメリットがあると思います。

また、将来的に文章構造が重視される可能性もありますから、正しく記述するに越したことは無いでしょう。

 

ソースが重くなってしまう

<br />を多用してページを作成すると、HTMLのソースが多くなってしまいます。なので、読み込みに時間が掛かるようになり、ページの表示速度が遅くなる可能性がありますね。最近の検索エンジンは、ページの表示速度を重要視しています。

なので、ソースが重いサイトだと、SEOで不利になってしまうかもしれません。無駄なソースが多いと美しくありませんから、<br />は推奨されていないです。ですから、軽いソースにするためにも、<p>の段落タグを中心としてテキストを構成した方がいいでしょう。

どうしても行間を空けたいときには、CSSでマージンの指定を行ってください。そうすれば、無駄なソースを増やすことなく、レイアウトをデザインすることができます。

 

以上、段落と改行タグの使い分けを紹介しました。HTMLは正しく利用しないと、文章構造が不明確になります。SEO的にも不利になりやすいですから、正しい使い方をマスターするようにしてください。

サブコンテンツ

このページの先頭へ