＜br要素＞ - 改行

公開日: 2017/02/09

br要素は、改行を表す要素です。詩など、改行がコンテンツの一部である場合にだけ利用できます。「改行した方が見やすいから」という理由でこの要素を用いるのは適切ではありません。

概要

名前: br (Break)
カテゴリー: Flow content; Phrasing content
配置できる場所: Phrasing contentが期待される場所。
コンテンツモデル: 空要素のため、子ノードを持ちません。
タグの省略: 省略できません。
DOM Interface: HTMLBRElement
仕様書: https://html.spec.whatwg.org/multipage/semantics.html#the-br-element

属性

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

例えば、詩は、改行もコンテンツの一部です。改行の位置を変えたら、詩の世界観を壊してしまうでしょう。br要素は、このような、コンテンツの一部である改行をマークアップするための要素です。下記は、適当に作った詩を例にしたものです。この詩において、改行は決まった場所でなければいけないコンテンツなので、br要素を利用できます。

HTML

<p>ああ ウェブサイト<br>
更新しないと 検索順位が落ちていく<br>
ああ ウェブサイト<br>
運用してると 怪しげなアドバイザーが寄ってくる</p>
<p>ああ ブログ<br>
「もうすぐ更新するよ」という切り札に誰も反応しなくなってきた<br>
ああ ブログ<br>
「参考になりました」という言葉は聞くけど思われはしないんだ</p>

デモを開く

例えば下記のように「改行を入れた方が見やすいから」という理由でbr要素を用いるのは明確に間違いです。デザイン目的の改行は、スタイルシートを使うべきです。

HTML

<p>成績は次の通りでした。</p>

<p>鈴木さん: 80点<br>
山田さん: 95点<br>
前田さん: 56点</p>

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜br要素＞ - 改行</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/br/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>br要素は改行を表す要素です。コンテンツの一部としての改行をマークアップするのに利用します。</p>

<h2>適当に作った詩</h2>
<p>ああ ウェブサイト<br>
更新しないと 検索順位が落ちていく<br>
ああ ウェブサイト<br>
運用してると 怪しげなアドバイザーが寄ってくる</p>
<p>ああ ブログ<br>
「もうすぐ更新するよ」という切り札に誰も反応しなくなってきた<br>
ああ ブログ<br>
「参考になりました」という言葉は聞くけど思われはしないんだ</p>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/625/"> <meta charset="utf-8"> <title>【デモ】＜br要素＞ - 改行</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/br/"> </head> <body>

<p>br要素は改行を表す要素です。コンテンツの一部としての改行をマークアップするのに利用します。</p> <h2>適当に作った詩</h2> <p>ああウェブサイト<br> 更新しないと検索順位が落ちていく<br> ああウェブサイト<br> 運用してると怪しげなアドバイザーが寄ってくる</p> <p>ああブログ<br> 「もうすぐ更新するよ」という切り札に誰も反応しなくなってきた<br> ああブログ<br> 「参考になりました」という言葉は聞くけど思われはしないんだ</p>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>