段落pと改行タグbrの違いと使い分け

紺色系背景画像 ブログ運営

人の目には同じ改行のように見えますがHTMLではpとbrは違う意味を持ちます。

HTMLのルールに則って文書を作成することでどの環境でも同じように表示されるようになります。

また検索エンジンのロボットにも文書構造が伝わりやすくなります。

段落pと改行タグbrの違い

WordPress標準エディタ「Gutenberg」ではブロックを使って文章を組み立てていきます。

ブロックに文字を入力するとデフォルトで「段落ブロック」になります。

段落ブロックに文を書き終え「エンターキー」をクリックすることで次のブロックに進みます。

段落とはひとつの意味を持つ区切りなので段落ブロックを分けたということは前の段落とは違う意味を持つということになります。

「しかし」や「ところで」などで始まる文は段落を分ける例となります。

コードエディターで見ると段落を表すpタグに囲まれています。

もし同じ段落内で改行だけをしたい場合には改行タグbrを使います。
改行は「エンターキー」と「Shiftキー」を同時押しします。

コードエディターで見ると改行を表すbrタグが挿入されています。

見た目ではなく文書構造を意識する

段落や改行によって文と文の間に余白ができますが余白の幅はテーマやCSSによって決められています。

そのため見た目だけで段落を分けたり改行を重ねたりしても環境によって見た目が変わってしまいます。

また空白の段落や改行を重ねることはHTMLの文書構造としては意味のないことなので推奨されていません。

空白を作るスペーサーブロック

余白を大きく取りたいならCSSカスタマイズでできますがGutenbergにはスペーサーブロックという機能があるので簡単にできます。

何も入力する前のブロック左にあるボタンをクリックし「ブロックの追加」をします。

ブロックの種類を選択できるので「スペーサー」をクリックします。

このようなスペーサーブロックが作成されます。

青いボタンをドラッグすることでスペースの幅を変えることもできます。

この方法であればどんな環境でも同じように表示される余白が作れます。

コメント