本気で学ぶ!HTML入門#09

【HTML入門】改行は<br>。ただちょっと注意も必要

HTML入門#09

「HTML入門」9回目。今回からテキスト関連のインライン要素を学習していきましょう。HTML5のカテゴリで言うと「フレージング・コンテンツ」ですね。その中でも今回は、改行を表す「br要素(<br>)」について見ていきましょう。

目次

  1. 改行を表すbr要素
  2. 改行タグ(br要素)の使い方
  3. 【演習】改行タグを使ってみよう!
  4. まとめ

改行を表すbr要素

br要素は、改行を行いたい箇所<br>と記述します。

概要
br要素は、Line Break(ラインブレーク)の略で改行を表します。改行(文を分割)したい箇所で<br>と記述するとその位置で改行されます。br要素は、「ここで」改行という意味なので終了タグを必要としない、空要素(エンプティ要素)です。
コンテンツ・カテゴリ
コンテンツ・モデル
なし(空要素)
配置できる場所
フレージング・コンテンツが配置できる場所
ブロックレベル要素・インライン要素
インライン要素

要素のカテゴリやコンテンツモデルについては、下記の記事を下さい。

HTML入門#05

【HTML入門】要素のカテゴリは配置のルールを示す

 HTMLでは、どれだけテキストエディタ上で改行をしても、ブラウザで表示される際には改行されていません。意図的に改行(文の分割)をしたい場合は、その箇所でこの改行タグ(<br>)を記述しましょう。

属性

br要素には、グローバル属性が使用できます。

属性については下記の記事を御覧ください。

HTML入門#2

【HTML入門】HTMLの属性ってなに?属性の役割と書き方

改行タグ(br要素)の使い方

改行タグ(br要素)は、改行(文を分割)したいところで、<br>と記述すれば改行されます。

サンプル

<p>
  WEBの勉強をして、<br>
  WEBクリエーターになる。
</p>

表示例

See the Pen NrWMmx by Qlio (@qlio) on CodePen.23853

注意点

改行タグ(<br>)は以下の3点に注意して使用して下さい。

改行タグをスペース(行間)を開ける目的では使用しない

改行タグ(<br>)は、スペース(行間)を開ける目的で使用するのはやめましょう。あくまで、<p>(段落)などの中で文章を分割する目的として使用して下さい。

従って下記の使い方は誤りです。

<p>ひとつめの段落</p>
<br>
<br>
<br>
<br>
<p>2つ目の段落</p>

See the Pen yJLjrM by Qlio (@qlio) on CodePen.23853

もし、段落を分けたいのであればp要素を使う方が好ましいですし、視覚的な目的でスペースをあける場合はCSS(ホームページの視覚的な表現を行なう言語)

HTML入門#06

【HTML入門】p要素(<p>)で段落の範囲を指定してみよう!

XHTMLで書く場合は書き方が少し異なる

これは、改行タグ(<br>)に限った話では無いですが、XHTMLでは空要素も閉じる必要があります。じゃあ、<br></br>ってするの?と思うかもしれませんが、これは違います。XHTMLにおける空要素は、開始タグの要素名の後に半角スペースを開けてから/を付けます。

<br />

このようになります。

改行タグのせいで逆に読みにくくなる可能性がある

改行タグ(<br>)は改行する目的で使用していいのですが、それが「全てのデバイスで読みやすい」とは限りません。そもそもHTMLは、改行タグ(<br>)を付けなくても、文章がブラウザの横幅に達すると自然に改行します。例えば下記のような改行を付けたとします。

br要素は改行です。<br>
スペース(行間)を開ける目的で使用するのはやめましょう。<br>
それは、CSS(ホームページをデザインする言語)でやりましょう。<br>

See the Pen mEdLgY by Qlio (@qlio) on CodePen.23853

というコードを書いたとします。おそらくPCで見ている人は<br>の部分以外改行されていないと思いますが、スマホで見てる人は自然の改行位置もされていると思います。ユーザーによってブラウザの幅も、フォント(書体)も違います。なので自然の改行位置も変わります。

そうなると人によっては下記のような位置で改行は入る人もいるかもしれません。

br要素は改行です。
スペース(行間)を開ける目的で使用するのはやめましょう
。
それは、CSS(ホームページをデザインする言語)でやりまし
ょう。

こんな風に、「。」だけの行とかが生まれる可能性があります。これは逆に見にくいので、改行タグ(<br>)は注意して使いましょう。個人的には、改行タグ(<br>)をあまり使いません。

【演習】改行タグを使ってみよう!

では前々回のHTMLに改行を付けていきましょう。

自力でできそうな人は下記の完成イメージを参考に、文字列「サンプルカフェは、大阪府豊中市にある架空のカフェです。」の後ろに改行タグを付けてみて下さい。「難しいなぁ」という方は、下の編集手順を参考にしてみて下さい。

完成イメージ

See the Pen WxNJBw by Qlio (@qlio) on CodePen.23853

編集手順

  1. 前々回作った「index.html」をテキストエディタを開いて下さい。

  2. 文字列「サンプルカフェは、大阪府豊中市にある架空のカフェです。」の後ろで改行タグ(<br>を付けて下さい。

    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="utf-8">
      <title>サンプルカフェ</title>
    </head>
    <body>
    <h1>サンプルカフェ</h1>
    <p>大阪府豊中市にある架空のカフェ</p>
    <h2>こだわり</h2>
    <p>サンプルカフェは、大阪府豊中市にある架空のカフェです。<br>
    厳選されたとっても美味しいコーヒー豆をのみを焙煎しご提供しています。お客様に「最高のコーヒーをゆったりと楽しんで頂きたい」そんな想いがたっぷり詰まったカフェです。</p>
    </body>
    </html>
  3. 上書き保存し、ブラウザで改行されていることを確認しましょう。

See the Pen WxNJBw by Qlio (@qlio) on CodePen.23853

できましたか?

まとめ

今回は改行タグ(<br>ついて見ていきました。文章中で改行(文を分割)する目的で使用する空要素でしたね。

  • 改行はスペース(行間)を開ける目的では使用しない
  • 改行をすることで読みにくくなっている可能性がある

上記の注意点を意識して使って下さい。

次回もテキスト関連のインライン要素として、「強調」や「重要」を表す要素を学習しましょう。

HTML入門#09