WordPressのビジュアルエディタで記事を書く時に、Enterキーで改行すると、HTML的には<p> </p>というコードによって改行が実現されていますが、どうもこれがあまりよろしい書き方じゃないようでした。
WordPressのビジュアルエディアで単に改行をしたい場合はShift+Enterで行うようです。こうするとHTML的には単なる改行を意味する<br />で表現されます。
ところが現在では、このBRというタグを使うこと、というより明示的な改行を行うこと自体あまりよくないということを言っている記事もみかけました。
というわけでPタグとBRタグの違いと、Webサイトでの改行についてまとめました。
PタグとBRタグとは
PタグもBRタグどちらもHTMLで文書構造を定義するために使うものです。
Pタグは、このタグで囲った部分が1つの段落であることを示すために使います。
BRタグは、単に明示的な改行を行うために使うものです。
PタグとBRタグの共通点は、どちらも改行を行う点です。ただし、文書構造的には全く別物です。
PタグとBRタグの使い分け
HTMLのコーディングについて言えることですが、HTMLでは文書構造のみを定義し、見た目についての定義はするべきではないとされています。というわけなのでBRタグを連続して使うことなんてありえないことになります。
人間がパッと見で「段落が2つある」とわかる文章を、PタグとBRタグでそれぞれつくった場合、HTMLで文書を把握する「クローラー」は「段落が2つある文章」と「改行によって行間に空きのある単一段落の文章」というように全く別の文書として理解します。PタグとBRタグを適切に使い分けないと、クローラーに正しく意図を伝えることができなくなってしまいます。
ですから、段落として改行したいならPタグを、単に改行したいならBRタグを使うというようにします。
改行と現在のブラウジング環境
紙媒体の場合は、誰が見ても同じように見えますから、見やすいとかんがえられる部分で意図的に改行を入れるのは適切だと思います。
ただし、デジタル媒体で見る場合には話が変わってきます。現在は、同じWebサイトを見るにしても、パソコン、タブレット、スマホというように色んなサイズの端末が使われます。端末が変われば当然文書が表示される領域も形も違います。
ですから、パソコンからWebサイトの記事を制作したとき、いくらパソコンで見やすいように改行をしたところで、スマホからアクセスされてしまうと、意図したものと全く違う見え方になってしまうわけです。ですから、現在では明示的に改行をすること自体控えたほうが良いのかもしれません。
もし意図的に改行をするなら、例えばパソコンで見ている場合にだけ改行するような仕組みにするなどして、端末による区別を実装する必要があるということになりそうです。
ちなみに、これは改行の問題とは関係ありませんが、異なる端末からの閲覧を考慮していなかった例です。これは以前書いた記事ですが、スマートフォンで表示がくずれてしまっています。書いていたときは、パソコンで見ることしか頭になかったようです。
