BRタグは使うなとか、Pタグがないとダメだとか、気にしなくてもよいと思うけどね

  • 投稿 : 2018-09-20
  • 更新 : 2018-09-27
・HTMLの仕様(思想)的にダメ
・SEO的にダメ

1つ目で反論できにくく、2つ目でとどめを刺されて従うしかないみたいな感じかもしれません。

でも、GoogleがやっているBloggerというサービスでは、brタグで改行しまくってますけどね。かつpタグに関しては明示的に入れない限りは入らないので、Bloggerの多くのブログは本文(エントリー)のところには入ってないと思う。

Google Japan Blog

たとえば、上記のブログとかをみるとよくわかると思う。brタグが連続して使われたりしてる。pタグは一切入っていない。おまけに、本文中にはhタグも使われてなくて、タイトルらしきものは、bタグによる太字です。

br-tag01.png

Bloggerの編集画面はこんな感じです。どちらの設定でも、結局、brタグで改行です。

Yahooニュースでも

brタグが続けて2回使われていますね。どうもレイアウトのために使われてるように見えますけどね。

段落(pタグ)のなかで、読みやすいように空行をいれてるというスタイルのようです。

意味ある段落(pタグ)と見た目の段落(brタグ)できちんと分けられてるような雰囲気ですね。

書きやすいように書けばいいのではないの?

・読者が見やすいように書く
・書き手が書きやすいように書く

これ、悪いことなんですかね?

1つ目に関しては、読者ファーストなので、GoogleのSEOの思想にあってるはずですよね。同じように見えるのなら、HTML的に正しいほうがいいよねというのはあったとしても・・。

あと、明らかに流行があるよね。文字の大きさや行間にしても・・。
2つ目に関しても結構重要だと思う。書きやすいスタイルで書き続けるというのは、継続して続けられることにもつながると思う。

段落の最初の1文字目は、字下げすべき?!

印刷物をはじめ紙に書く文章は「段落の頭は1文字落とす」が一般的です。僕も小さい頃、学校でそのように教えられました。僕が小学生だったのははるか昔ですけど、きっと今でも同じように教えているんじゃないでしょうか。だから、「Webであっても日本語の文章なのだから、1字下げは当然」という考え方はうなずけます。

でも一方で、「文章を書くとき、むやみに空白行を入れるのはよくない」というようなことを言われたような気もします。伝統的な文章の書式に則ると、「段落の頭は1文字落として、むやみに空白行を入れない」ということになるのですが、Webの場合、これだとちょっと読みにくさを感じてしまいませんか? 「読みにくい」というのは個人的な感覚ですが、きっとそう感じている人が多いから、空白行を入れているメディアが多いのではないでしょうか。

結局のところ、伝統的な日本語の書式に則るよりも、読み手にとって読みやすい形であるかどうかが、一番重要なのではないか、と僕は思っています。そうして、1つのメディアなり、個人のブログならそのブログの中で、1つの書式が一貫していれば、それで十分ではないでしょうか。
Web記事でも段落の文頭は1文字空ける?(2015年版) | 編集者・小平淳一の共有ノート

覚悟を決めるしかないけど・・

SEO的に不利とかいわれたら、もう逆らえないのなら、どんな論理も無駄なので・・。

書き手が書きやすくなければ、
・継続するのは難しい=>コンテンツ量が不足する
・内容のあるものが書きにくい
・個性を出しにくい
とかそういうのはあると思うけど、その程度で、SEO的に不利に打ち勝てるかどうかですよね。

実際に不利かどうかさえも謎なんだけど、HTML的に間違っているという話は正しいので。

brタグを使ったために、スマホでみるとレイアウト崩れて泣く

過去にbrタグで書いた文章がたくさんあって、スマホ時代になって、スマホで見ると崩れて泣く結果になったので、brタグなんて使わないほうが良いとかいう話もあるけど、それは結果論だと思う。

br{
   display:none;
}

brタグを無効(非表示)にするスタイルシートを適用すれば、とりあえずはBRタグによる改行は消えます。

@media screen and (max-width: 767px){
  br{
     display:none;
  }
}

スマホのときだけ、brタグによる改行を消したい場合は、上記で疑似的にできます。上記は横幅が768px以下の場合はBRタグを無効(非表示)にするです。

@media screen and (max-width: 767px){
  .entry-content br{
     display:none;
  }
}

ブログ記事の本文だけbrタグを無効にしたいとかなら、上記のようにすれば、ほかのところには影響ありません。

HTML的に正しくない

メモ: 段落の間を開けるために <br> を使わないでください。それぞれを <p> 要素で囲み、 CSS の margin プロパティで間隔を制御してください。
<br>: 改行要素 - HTML: HyperText Markup Language | MDN

犯してはいけないHTMLタグの過ち10個|Webpark

ただし、Web標準(仕様)のほうが変わることもあるけどね。たとえば、aタグでdiv要素を括ってもよくなったりとか・・。

補足:脱「brBrbr」プラグイン

追記:2018/09/27
【WordPress】脱「brBrbr」プラグイン 【その1】 – ブログ運営のためのブログカスタマイズ
【WordPress】脱「brBrbr」プラグイン 【その2】 – ブログ運営のためのブログカスタマイズ

とはいっても、「brBrbr」プラグインに依存するのはよろしくなさそうなので・・・。Wordpressの標準的な処理に逆らうかのはトラブルを抱え込むもとな気がする。

スポンサーリンク