HOME内部対策 > BRタグとは~改行してHTML構築するための基本知識

BRタグとは~改行してHTML構築するための基本知識

2017/03/31[最終更新日]:2017/03/31
このエントリーをはてなブックマークに追加

BRタグで改行し、HTMLマークアップしながら、サイト構築する方法があります。

今回は、HTMLでBRタグを使わない件、HTML5のBRタグについて、HTMLのBRタグ[<br>と<br />(スラッシュ閉じる)] の違いについて中心に解説したいと思います。

BRタグとは~改行してHTML構築するための基本知識

あなたのサイトの順位は大丈夫ですか?順位・コンテンツ・リンク調べ、必要な対策をご案内します(無料)⇒

PR

BRタグとは

BRタグとは、行を変える(改行する)際に使うHTMLタグです。
主に「ひとまとまりのテキスト文章」や「項目や順序以外の短めのテキスト文章」などのWebコンテンツを改行するときに使います。

BRタグの多用により、認識しずらいHTMLソースコードとなるケースが見られます。
BRタグだけでなく、PタグDIVタグなど使って、認識しやすいソースコード(構造)にすることが大切です。

HTMLでBRタグを使わない件

HTMLでBRタグを使わない件について、以下のような理由があります。

・ソースコードが見ずらいから
BRタグで改行を多用し、ソースコード上で他のHTMLタグと混同し見ずらくなる

・コンテンツの区切り(セクション)がわかりずらいから
BRタグで改行を多用し、ソースコード上でコンテンツ同士の区切りがわかりずらくなる

・デバイスによって見え方が変わるから
BRタグで改行しても、PC、スマホ、タブレットなどのデバイス解像度の違いにより、改行位置が変わってくる

あなたのサイトの順位は大丈夫ですか?順位・コンテンツ・リンク調べ、必要な対策をご案内します(無料)⇒

HTML5のBRタグについて

HTML5のBRタグについて、HTML4.01からHTML5へのバージョンアップによる変更点は特にありません。
※参考:<br>-HTML5タグリファレンス

HTML5のBRタグも今まで通り、改行がコンテンツの一部を成すような場合に使用し、デザイン調整の目的で使用しないようにしましょう。

HTMLのBRタグ[<br>と<br />(スラッシュ閉じる)] の違い

HTMLのBRタグ[<br>と<br />(スラッシュ閉じる)] の違いは、以下のようになります。
※参考:htmlの改行タグを<br>ではなくて<br />と書くのはどうしてでしょう?

<br>は、XHTMLの構文以前に採用された閉じタグが無い要素(空要素)です。
<br />は、XHTMLの構文を機に採用され、DOCTYPEが「XHTMl1.0」「XHTML1.1」などの場合に、BRタグ含む全ての空要素をスラッシュ付きで記述するルールとなりました。

現在のHTML5の構文では、基本はスラッシュなしのBRタグを使いますが、「<br>」「<br />」どちらで記述しても問題ないようです。

このような、<br>と<br />の違いを理解しながら、適切なマークアップを心がけましょう。

あなたのサイトの順位は大丈夫ですか?順位・コンテンツ・リンク調べ、必要な対策をご案内します(無料)⇒

BRタグの使い方・書き方

BRタグの使い方・書き方は、以下のようになります。

内容が変わらないひとまとまりのテキスト文章での使い方

HTMLマークアップ例:
<p>SEOとは、Search Engine Optimization の略で「検索エンジン最適化」を意味します。<br>
つまりSEOは、インターネットの検索結果でより多くサイト表示させるために行う全体的な取組みを指します。</p>

項目や順序以外の短めのテキスト文章での使い方

HTMLマークアップ例:
<p>会社名:株式会社○○○○○<br> 住所:北海道○○市~<br> TEL:○○○-○○○-○○○○</p>

BRタグにCSSを適用して改行を無効化する方法[class(クラス)指定など]

BRタグにCSSを適用して改行を無効化するには、以下のような方法があります。

直接指定する

要素名brに直接CSSの「dispaly」プロパティでnone値を指定することで、BRタグ(改行)を無効化できます。
複数ページにBRタグがある場合、より効果的です。

CSS記述例:
br {
display: none;
}

class属性を使う

主に、CSSなどの外部ファイルと連携するために指定する属性です。
CSSの記述では、「要素名.クラス名 {プロパティ名:値;}」という書式です。
※要素名は省略できます。

HTMLマークアップ例:
<p>SEOとは、Search Engine Optimization の略で「検索エンジン最適化」を意味します。<br class=”text”>
つまりSEOは、インターネットの検索結果でより多くサイト表示させるために行う全体的な取組みを指します。</p>
CSS記述例:
br.text {
display: none;
}

あなたのサイトの順位は大丈夫ですか?順位・コンテンツ・リンク調べ、必要な対策をご案内します(無料)⇒

BRタグの連続改行

BRタグの連続改行をすべてのWebコンテンツで利用するのはあまり望ましくありません。

HTMLでBRタグを使わない件でも先述したよう、「ソースコードが見ずらい」「コンテンツの区切りがわかりずらい」「デバイスによって見え方が変わる」などの事項が発生しやすくなります。

なので、BRタグの連続改行は控え、CSSでコンテンツ間隔を柔軟に調整できるようマークアップするとより良いと思います。

BRタグとSEOについて

BRタグとSEOについて、直接的な検索順位への影響はほぼ無いと考えられます。

しいて言うなら、BRタグの多用でソースコードが増え、ファイルサイズ増加によるページ読み込み速度が遅くなるといった悪影響があるかもしれません。

BRタグによるSEO効果について簡単に調べましたが、あまり情報がないので、そこまで注視する要素ではないかもしれません。

あなたのサイトの順位は大丈夫ですか?順位・コンテンツ・リンク調べ、必要な対策をご案内します(無料)⇒

BRタグで行間・高さ調整

BRタグで行間・高さ調整することが可能ですが、コンテンツの間隔が空きすぎたりして、望むデザインに調整できないことがあります。

見やすいコンテンツの方が、サイトのパフォーマンスも上がりやすくなります。

なのでコンテンツの行間・高さ調整は、BRタグよりCSSを使って、柔軟に微調整できるようにした方が良いと思います。

BRタグ(改行タグ)を自動挿入する

BRタグ(改行タグ)を自動挿入するには、以下のようなツールを活用すると便利です。

HTMLやWikiの改行タグ自動挿入機
普通のテキストに、HTMLやWikiの改行タグを自動で一括挿入したり、タグ入りのテキストから改行タグを一括で除去。

まとめ

BRタグを適切に使い、サイト構築に役立てましょう。

コンテンツの質を上げ、サイトの価値を高めながら、SEO対策で上位化を目指すことが重要です。

あなたのサイトの順位は大丈夫ですか?順位・コンテンツ・リンク調べ、必要な対策をご案内します(無料)⇒

あなたのサイトの順位は大丈夫ですか?順位、リンク、内部を調べ、必要な対策をアドバイスします(無料)
上位表示を目指すURL *
(例)http://○○.co.jp
上位表示を目指すキーワード *
(例)中古車
ご担当者様名 *
電話番号 *
メールアドレス *

※個人情報の管理は、「プライバシーポリシー」に同意の上お申し込みください

このエントリーをはてなブックマークに追加
カテゴリ:内部対策
B!

最新記事
SEOラボをSNSで応援する
無料SEOツール
話題の記事
2017年7月 効果があったSEO対策は、被リンク【まとめ】
アメブロで上位表示できますか?【今月(2017年8月)の問合せ】
サイトの使いやすさ(UX=ユーザーエクスペリエンス)が重要なSEO要因になってきている
検索ユーザーが求めるコンテンツの考え方
「検索エンジン最適化スターターガイド」は最も効率のよいSEO技法である
ブログを2つ運営しています。同じ内容を投稿していいの?という問い合わせ
最近6位に上昇したページの対策教えます
他社のSEO商品を比較
最近、順位が落ちてきたというお問合せ
最近のSEO対策と順位決定の仕組み
人気記事BEST10
follow us in feedly