HTMLのbrタグとは？
HTML初心者の方はWEBページ上で改行をしたいときにbrタグを使えば改行できるというのは序盤に習いますよね。
このHTMLのbrタグについて改めてご紹介していきます。
brタグは何の略語？
HTMLのタグの名前は何かの英語の略が多いですが、brタグは何の略なのでしょうか？
答えは「Break」の略になります。breakはここでは「改行」の意味になります。WEBページの文章中で改行したいところで改行タグのbrタグを使います。
brには閉じタグはない
HTMLのタグでは<h1></h1>や<a></a>のように開始タグと閉じタグがセットで書くものが多いですが、brタグは閉じタグはなく、<br>のように開始タグだけで書きます。
※このように閉じタグのない要素を空要素といいます
ちなみに<br />の書き方をよく見かけますが、XHTMLの時の名残でHTML5では文法上は問題ありませんが、今はあえて書く必要はないので<br>と書くようにしましょう。
余白をあける目的でbrタグは使わない
brタグの前後には改行があきますが、そのためにデザイン上で余白をあけたいがためにbrタグを複数利用する方がいます。
これは使い方としては本来のbrタグの使い方としては間違いでおすすめできません。余白のデザインを調整するにはCSSや他のタグを使って余白をとるようにしましょう。
詳しくは下記の記事を参考にしてみて下さい。
HTMLのbrタグを使ってみよう
ここからは実際にHTMLのbrタグを使ったサンプルコードをご紹介します。以下のサンプルコードは俳句の文章中で5・７・5を分ける目的でbrタグで改行を入れている例です。
どうでしょうか？俳句の5・7・5の区切りとして、brタグをそれぞれ入れていて、結果の画面ではその箇所でしっかりと改行されていますね。
このように改行を明示的に行いたい箇所でbrタグを使いましょう。
brにはline-heightが効く
改行のときによくあるのが、行間の問題です。brで改行した箇所で行間が空いて思い通り調整できない場合があります。
これは実はbrのline-heightが原因であることが多いです。line-heightは行間を調整するプロパティで、これはbrタグにも有効になります。
line-heightについては下記の記事を参考にしてみましょう。
先ほどと同じ文章でbrタグのline-heightを「2」にしてみましょう。
先程の例よりも結果を見ると、少し行間が空いていますよね。このように、brタグにline-heightが意図せず効いていて行間が思い通り調整できないこともありますので、brにもline-heightが効くという事は覚えておきましょう。