やってはいけない改行<br>タグのこんな使い方

正しい改行タグの使い方

ブログを始めたばかりの頃、いちばんよく使ったタグ。真っ先に覚えたのもたぶん <br> です。けれど、その使い方が間違っているかもしれません。今回は正しい改行の使い方について書こうと思います。

PR

段落 <p> と改行を使い分けすることが大切

ブログを始めた当初、改行の存在を知ったときは、「おおーなんて便利なんだ!」と使いまくりました。その使い方が激しくまちがっているとも知らず。今だからこそ思う、できれば初期の頃に知っておきたかった「正しい <br> タグの使い方です。

やってしまいがちな誤った <br> の使い方

ブログを書き始めの頃に無意識で行ってしまうのが、見た目の読みやすさを重視して改行を使うパターンだと思います。わたし自身もそうでした。携帯やスマホで記事をサクっと書いて投稿できてしまうことも影響しているのか、友だちにメールを打つのと同じ感覚で無意識に使ってしまいがちなのです。

かなり多くの人が思い当たる節があるのではないでしょうか。改行をデザイン目的のために使ってはいませんか?一行の空白が欲しくて改行を使ったりしていませんか?

上にあげた2点は、わたし自身の経験談です( ;・∀・)

実例をあげてみましょう。

入力例
今日はいいお天気。<br>
夫婦揃って何をするでもなく、<br>
ぼーっと二人でテレビを見ていたのだけど、<br>
わんこも退屈そうにしていたので旦那に声をかけました。<br>
<br>
「今から一緒にわんこのお散歩へ行かない?」<br>
「そうだなー、じゃ行くか!」<br>
<br>
その会話を聞いていたわんこは大喜びで玄関へ走って行きました。<br>
<br>
<br>
プラウザ上の表示画面
今日はいいお天気。
夫婦揃って何をするでもなく、
ぼーっと二人でテレビを見ていたのだけど、
わんこも退屈そうにしていたので旦那に声をかけました。

「今から一緒にわんこのお散歩へ行かない?」
「そうだなー、じゃ行くか!」

その会話を聞いていたわんこは大喜びで玄関へ走って行きました。

分かりやすいように少し極端にしています。パソコンの表示画面だけを見ると、特に問題はなさそうですが入力画面は見ての通りです。

実は、もう一つ問題があります。それは携帯で見た場合です。パソコン上で見やすいように入力しているので、当然PCではキレイに表示されているわけですが、これが携帯で見るとこんなことになっているかもしれません。

今日はいいお天気。
夫婦揃って何をするでもなく、
ぼーっと二人でテレビを見ていたのだ
けど、
わんこも退屈そうにしていたので旦那
に声をかけました。
「今から一緒にわんこのお散歩へ行か
ない?」
「そうだなー、じゃ行くか!」

以下略

あるある!と思った方も多いのではないでしょうか。こちらの文章の途切れ目は、決して投稿者の望みどおりの結果ではないはずです。それだけではなく、読みやすくしたつもりの行為までもまったく無意味になっています。

入力例の中で、本来の使い方として適切なのはどこでしょう?

文章の括りには段落を使う

今から二年前のわたしもよく連打していました。ひどいときは3連打とかやらかしていました。なぜなら <p> タグの存在を知らなかったからです。

話の括りにスペースが欲しければ、使うべきはこちらです。前回の入力例の文章ならこのような形になります。

入力例

<p>
今日はいいお天気。夫婦揃って何をするでもなく、ぼーっと二人でテレビを見ていたのだけど、わんこも退屈そうにしていたので旦那に声をかけました。
</p>

<p>
「今から一緒にわんこのお散歩へ行かない?」
</p>

<p>
「そうだなー、じゃ行くか!」
</p>

<p>
その会話を聞いていたわんこは大喜びで玄関へ走って行きました。
</p>

プラウザ上の表示画面

今日はいいお天気。夫婦揃って何をするでもなく、ぼーっと二人でテレビを見ていたのだけど、わんこも退屈そうにしていたので旦那に声をかけました。

「今から一緒にわんこのお散歩へ行かない?」

「そうだなー、じゃ行くか!」

その会話を聞いていたわんこは大喜びで玄関へ走って行きました。

改行タグは使っていません。でも、気にしていた見栄えの部分も解決されています。

というより、改行タグは詩や住所など、コンテンツの一部をなすような改行に対してのみに使わなければいけないというルールのようです。

(コメントにてご指摘いただきました。)

連投しなければ・・・最小限の使用ならば許されるのかな、と思っていましたが、そもそも段落中の話のグループ分割という役割で使ってはいけないものだったんですね。

具体的な使用例は、HTML5.JPをご覧ください。

SEO的にも重要かもしれない話

先ほど、連打NGもわりと最近知りましたと書きましたが、そのきっかけとなったのがSEO関連の記事を読み漁っていたことでした。具体的には、キーワードに設定した言葉は何回くらいまで使っても大丈夫なんだろうか?と疑問に思い調べていたのです。

かなりの数のサイトを読んでいたのと、そのときはこのようなブログをする予定はまだなかったのでソースをメモしていません。ただ、SEO的な話題はいつも何を読んでもハッキリとした答えが見つからないものなので、そこで見かけた話も本当かどうかわたしには判断できません。

ですから、こういう話を見かけたよ~という体験談としてご紹介します。参考にするもしないも読み手の皆さんに委ねる形になりますが、気になった方は頭の片隅に留めておいていただければと思います。

前置きが長くなりましたが、キーワードとの関連についてお話します。

Google先生は、記事の中で同じワードを何度も何度も使うことは快く思いません。あまりにひどいとスパムと判断されサイトの評価を下げられてしまいます。それが、出現するワード数が同じ数であっても、「改行だけで作られている記事」と「段落を設定している記事(構造がしっかりしている記事)」では結果が異なるという内容でした。

改行というのは、そもそも文章の終わりを指示するものではありません。表面上の見た目では文章と文章の区切りになっていますが、コードの持つ意味としてはそうではないようなのです。ということは、Google先生からしてみれば「見出し」か「段落」がない限り、同じ話の括りだという判断をするというのです。そうすると「一つの話題に3回も同じワードが出てきている」となります。

でも文章が段落で構成されているものならば、同ワードを連投している、との判断はされにくいというのです。

わたしの知識では信憑性の有無も判断できませんが、そういうこともあるかもしれないな、と思った方は今後はその点も意識して記事を書くことをおすすめします。

タグは <br> と <br /> どちらが正しいのか

マニュアルサイトをたくさん見るようになった頃、<br /> を使っているサイトをよく見かるようになりました。最初は <br> を使っていたのですが、なんとなく <br /> が正しいのかな?と変えるように。

その後、調べてみると、役割はどちらも同じなのですが、書式が異なるということを知りました。HTMLで使うなら、<br> が正解で、XHTMLでの書式なら <br /> が正解。そこで、HTMLとXHTMLは何が違うのか、ここで分かりやすく説明したいところなのですが、噛み砕いた説明が出来るほどわたし自身にその知識がありません。なので、ざっくりとだけお話します。

HTMLとXHTMLの違いについて

XHTMLは、曖昧さが多かったHTMLをもっと厳しく再定義したもので、必ず開始タグと閉じるタグを使わなければならないという決まりごとがあります。

<p> で開始したら </p> で閉じなさい。という事なんですが、改行は囲んで使う類のものではないため、<br /> とし、そのタグの中で終了させるルールになっています。画像を投稿する場合の <img> や線が引かれる <hr> の場合も同じです。最後は半角スペースを1つ入れて閉じるようにしましょう。

最後に、HTMLとXHTMLの違いについてもっと詳しく!という方はこちらのサイト様で、分かりやすい例え話と、噛み砕いた表現で詳細に説明されているサイト様の紹介をされていますので、そちらを参照してください。

ここがポイント

  • 改行の乱用は控えましょう
  • 文章は段落 <p>~</p> タグで囲んで書きましょう
  • 開始したタグの閉じ忘れに気をつけましょう

少し難しい話も混じってしまいましたが、最後までお疲れさまでした。

» サムネイルや記事内に挿入するイメージ画像にピッタリ!
白黒イラストダウンロードサイト【シルエットAC】
※商用でも無料・クレジット表記不要
ブログランキング
お帰り前に応援1クリックいただけたら嬉しいです!
このページの情報があなたのお役に立ちましたらお願いします。
ブログランキング   にほんブログ村 小遣いブログ ポイントサイトへ
PR

シェアはとても励みになります。ありがとう!

購読はフォローが便利です

コメント

  1. hoge より:

    正解例に挙げられている

    <p>
    「A…」<br>
    「B…」
    </p>

    は誤りで、その場合の正しい記述は

    <p>「A…」</p>
    <p>「B…」</p>

    だと思います。(詳しくは以下の URL で)

    br 要素 – HTML5.JP http://www.html5.jp/tag/elements/br.html

    • sora sora より:

      hogeさん、はじめまして。
      コメントありがとうございます。

      そして丁寧なご指摘に感謝します。
      コメント内容及びリンクを参考に、入力例は修正しました。
      また、リンク先の具体例が分かりやすかったので
      記事内でも紹介させていただきました。

      お知らせいただきましてありがとうございました。

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です