【HTML】brタグの使い方と注意点
Kこんにちは！Kです！
今回は、HTMLにおける<br>タグについて紹介したいと思います。
そもそもこんなタグ知らない！という方はぜひ読んでみてください。
メジャーなタグなので知っている方も多いと思いますが、意外と注意点を意識しないでなんとなく使っている方もいると思いますので、そういった方もぜひ最後まで読んでみてください！
<br>タグとは？
<br>タグのbrは、break（ブレイク）の略称です。
このタグは「改行」をするタグになります。
<br>タグを挿入した位置で改行されます。
簡単な例です。
brタグを使わない場合
<body>
<p>これはサンプルコードです。改行されません。</p>
</body>表示結果
これはサンプルコードです。改行されません。
brタグを使った場合
<body>
<p>これはサンプルコードです。<br>改行されました。</p>
</body>表示結果
これはサンプルコードです。
改行されました。
どうでしょうか？簡単ですね(^^)
このタグを使う理由として、HTMLにおける文章で改行をしても実際の画面では改行されいので、<br>タグを使うことで改行位置を明示するために使用します。
改行する別の方法として、<pre>タグや<div>タグを使ってブロックに切り分ける方法があります。
<div>タグについては以前記事にしていますので、興味がある方はぜひご覧ください。
<br>タグを使用するときの注意点
<br>タグを使用するにあたっての注意点があります。
以下の3つに気をつけてください。
・画面サイズによる表示ズレに気をつける ・できるだけ行末にタグを使用する ・レイアウトのための使用はしない
簡単に一つずつ説明しますね。
画面サイズによる表示ズレに気をつける
<br>タグは指定した箇所で改行できるので非常に便利ですが、PCの画面サイズや最近ではスマホの普及などにより、ページを見るデバイスによって改行される位置がおかしくなる場合があります。
デバイスによる表示のされ方に注意して表示確認などは十分するようにしましょう！
できるだけ行末にタグを使用する
行頭に<br>タグを使用すると、その直前の行の末尾がブラウザの右端に配置される場合に、一行余分に改行されてしまうことがあるようです。
そのため、<br> タグは基本的に行末に記述する方がいいです。
ただ、場合によっては行頭や行間に記述する場合もあるかもしれないので、使う場合は最初の注意点でも言いましたが、十分表示確認してください。
レイアウトのための使用はしない
レイアウト目的とは例えば、余白を作るためにbrタグを使用する場合などですね。
brタグを連打して行間を大きく開けるなどが分かりやすいですかね。
基本的にはこのようなレイアウト目的の使用は文法違反なので気をつけてください。
仮にやったとしても表示はされますが、検索エンジンに適切に情報を伝えるためにも正しく使用しましょう！
レイアウトを変えたい場合は、CSSを使って（「margin」や「padding」）変更するようにしましょう！
最後に
今回は、brタグについて紹介しました。
普段brタグをなんとなく使っている方も改めて注意点を意識して使っていただければと思います。
初心者の方も改行するためのタグがあることを覚えて使っていただければと思います！
それでは、また！
Follow me!
