HTML5における<br>タグの使い方

<br>タグは、Break(改行)の略で、改行に使用されるものです。<br>タグを使用するだけで、文章を改行することができ、二文字で覚えやすく使い勝手も良いため、多用している人も多いのではないでしょうか。

簡単に使えてしまうタグなので、使い方を間違えたまま使用してしまっているかもしれません。今回は、HTML5における<br>タグの使い方をご紹介します。

HTML5における<br>タグの使い方

<p>
UX MILKは、クリエイターのためのUXに関する記事を配信しているメディアです。<br>
デザインやプログラミング関連など様々なカテゴリーがあります。
</p>

使い方は簡単で、改行したい文章と文章の間に<br>をおくと改行されて反映します。

HTMLの場合は、<br>、XHTMLの場合は<br />を利用します。

これはなぜかというと、XHTMLは、決まりが厳しく、タグは必ず閉じる必要があります。ただ、<br>は始まりと終わりのタグで囲めないので、このような書き方をします。内容は変わりません。

改行に使用しますが、住所などのように、改行が文章中に意味のあるものである場合のみに使用します。文の長さを揃えたり、スタイリングの調整の目的で使用することは推奨されません。

<br>タグを使うときの注意点

スタイル調整のために<br>タグを使う

少し余白を開けたいから、段落を区切りたいからという時に<br>を多用している人がたまにいます。brタグはあくまで改行するためのタグです。もしデザイン的に余白を開けたい場合などは、CSSなどで調整しましょう。

スマホでの<br>タグの使用に注意

<p>
「UX MILKは、<br>
UXに関する記事を配信しているメディアです。<br>
デザインやプログラミング関連など様々なカテゴリーがあります。」
</p>

「UX MILKは、

UXに関する記事を配信しているメディアです。

デザインやプログラミング関連など様々なカテゴリーがあります。」

上記のコードを見てください。ぱっと見た感じでは、おかしくないですが、下の文章自体をスマホで見ると、妙な改行になってしまいます。スマホで見るユーザーも多い時がありますので、その点注意しましょう。


イベント

2017/10/06(金)
UX School(全10回)