この記事はHTMLを学習中のWebデザイナーやコーダー、エンジニア、ディレクターに向けた記事になります。
HTMLのタグであるbrは誤用の多いタグになるのでぜひ学んでみましょう。
以下、茶番も兼ねていますが御覧ください。
HTMLを書ける猫とHTMLを極めたい猫
（チラッチラッ…誰も見てないニャ…？）
……ほててててててっ。
ほてちゃん、なにを連打してるミャ？
ほてえええぇぇっ？？？！！！
<!-- 文章の中に絶妙な余白を空けたいニャ -->
<p>ほてまるほてまる～。ほてまる音頭でよよいのよ～いにゃんにゃん♪<br>
<br>
<br>
<br>
ほてまるくん♪</p>みゃー？余白を空けたいミャ？
ほて…、もらった原稿で余白をつけてほしいという指定があったにゃ。余白をあけるためにbr連打しちゃったニャ。
にゃるぺそ。ところでbrを連続で使っちゃ駄目というのは分かってるかみゃ？
ごめんなさいニャ。brを2個以上使っちゃ駄目って聞いたことはあるけどなんで駄目かはわからないにゃ～。
じゃあ、よくある形に直してみるミャ。
<!-- 文章の中に絶妙な余白を空けたいニャ -->
<p>ほてまるほてまる～。ほてまる音頭でよよいのよ～いにゃんにゃん♪</p>
<p>ほてまるくん♪</p>にゃ～。これだと余白がたくさんつけたいってときにつけられないにゃ。。。
そうにゃのよね。本当であれば「デザインルールに則らない、突発的な要素の追加」は極力避けるのが無難だミャ。
とはいえ、そう言いにくいのも事実としてあるので、仕方なしに最初の「pタグ」にCSSで余白をあけるって手法も取られやすいミャ。
<!-- 文章の中に絶妙な余白を空けたいニャ -->
<p class="margin-bottom-100">ほてまるほてまる～。ほてまる音頭でよよいのよ～いにゃんにゃん♪</p>
<p>ほてまるくん♪</p>ほて…、CSSの編集が面倒くさいからついついbr連打しちゃったニャ～。
仕方ないミャ。CSSを迂闊に編集しないというのは正しい考えだミャ。
今回のように新規で発生するようなデザインの場合はちゃんと周りの人たちと相談するのが無難だミャ。
ほいにゃ！ところでbr連打はなんで駄目なんだにゃ？
brは「break（改行）」という意味だミャ。HTMLを学ぶときに一番分かりやすいタグだミャ。
あくまで改行のためのタグだから余白のために使うのはNGだミャ。
ほてぇ…、改行のために使うのはわかりましたニャ。でもついつい見た目を簡単に調整できちゃうからやっちゃいがちだニャ。
もちろん、人が目で見るだけであれば見た目さえ整っていれば違和感もないし別にいいじゃないか？と思うかもだミャ。
大事なのは「HTMLはデータとして認識される」ということミャ。
改行は改行だし、段落は段落ってデータとして認識するのは誰ミャ？
ほて！！Googleさんとかニャ？！
それもあるミャ。
でも、もっと想像して欲しいミャ。
「ブラウザ、アプリ、HTMLを読み込むあらゆる機械・媒体」ミャ。
データはデータとして正しく記述しておかないと、機械側が読み込んで調整することが難しくなるミャ～。
それに、見た目だけではなく、音声でHTMLを確認する人もいるミャ。その場合、この改行連打によって文章自体の区切りが不明確になったり、段落ごとの読み上げが大変になったりするミャ。
まとめ：見た目のためだけのHTMLは極力避けよう
HTMLやCSSを最初に学ぶときに違和感を覚えるかもしれないことは「見た目のためだけにタグを使ってはいけない」というところと「正しい文章構造」の差がなにか分かりにくいところかもしれません。
また、divやspanの存在が更にややこしくなるかもしれません。
正しい文章構造になっていると「見出し」は「見出し」として。文章は文章として、画像は画像で、どんな画像なのか、など機械側が認識できるようになっていきます。
改行を連続で使う場合は「見た目のためだけ」に他ならないので見た目のためになんとかしたい場合は極力CSSでなんとかしましょう。
とはいえCSSも多様しすぎると大変なことになりますが、別途解説させてもらえればと思います。
