HTMLで空白行を挿入する方法をサンプルコード付き解説！
HTMLでテキスト中に空白行を挿入する方法をサンプルコード付きで解説します。HTMLで空白行を挿入する方法は複数あります。様々なサンプルコードを掲載していますので、必要に応じて使い分けられるようにすべての方法をマスターしましょう！
HTMLで空白行を挿入したい
みなさんはHTMLで、テキスト中に空白行を挿入したいときにどのように実装していますか？
HTMLで空白行を挿入を挿入する方法は様々な種類がありますが、その中には内部SEO的に不適切なものがあります。
ぜひ今回正しい実装の仕方を覚えて、その場に最も適した方法で使い分けわれるようにマスターしましょう！
HTMLで空白行を挿入する方法
まず最初にHTMLのコード内で直接空白行を挿入した場合はどうなるでしょうか。
このようにHTMLファイル内で改行しても、空白行はブラウザ上では表示されていません。これはHTMLファイルに書かれた改行やスペースを認識しないからです。
では空白行はどのように実装したら良いのでしょうか。確認していきましょう。
【非推奨】brタグを使って空白行を挿入する方法
次にbrタグを挿入する方法を解説します。brタグとはbreakの略で、文字通り「改行」を表すタグです。基本的には次のように改行を行うことができます。
このようにbrタグであれば空白行もbrタグで適宜実装することができます。直感的で調節も簡単です。
しかし実は空白行を挿入するためにbrタグを使う方法は推奨されていません。
あくまでもbrタグは改行を行うタグですが、このbrタグは空白行を挿入する用途のタグではなく、空白行を挿入する目的で多用することはSEOで低く評価される可能性があります。
それではHTMLではどのように空白行を挿入するのが適切なのでしょうか？
br以外で空白を挿入する方法
空白を挿入するにはpタグで空白行を挿入したい文章を分けます。pタグとはparagraphの略で段落という意味です。つまりpタグで分けられた文章は別の段落になります。
pタグはブロックレベルの要素なので縦に並びます。また、pタグを用いることで簡単に空白行を作ることができます。
以下のサンプルコードで改行と空白行の違いも確認してください。
pタグを用いることで空白行を入れることが確認できました。では空白行の高さを変えたいときはどのようにしたらいいでしょうか。
高さを変えるためには、ブロック要素であるpタグに対してmargin-bottomプロパティを用いて調整しましょう。
まとめ
HTMLで空白行を挿入する方法を解説しました。brタグとpタグを適切に使い分けられるようにしましょう。
