SEOに関する実験やデータ分析などを公開します

SEOの疑問を実験で解明しブログ配信【SEOラボ】

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

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

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

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

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 />の違いを理解しながら、適切なマークアップを心がけましょう。

検索順位を上げたり、検索流入を増やすにはSEOが重要!

関連記事

【2021年版】SEOとは?基本や重要な対策など初心者にわかりやすく解説!

SEOの基本を押さえて対策しよう。とくにユーザーの利便性を考慮することが重要で、これを無視すればGoogleに評価されない(検索順位や検索流入が向上しない)…

続きを見る

brタグの使い方・書き方

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

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

HTMLマークアップ例:

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

HTMLマークアップ例:

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

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

直接指定する

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

CSS記述例:

class属性を使う

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

HTMLマークアップ例:
CSS記述例:

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対策で上位化を目指すことが重要です。

検索順位が上がらない…なぜ?

検索順位が上がらない…なぜ?

検索順位が上がらない理由は、SEO対策の質が低いからです。

例えば、ユーザーの検索意図を無視したり、関連性の低いコンテンツを増やして内部リンクの最適化を疎かにします。
この場合、SEO対策の質が下がります。
結果、検索順位が上がらないというわけです。

こうした悪い状況を回避する為に、サイトの欠点を調査して上位化に必要な対策を洗い出しましょう。

SEO対策無料ご提案はこちら