<br> / <wbr> / <ruby>

対応:		HTML5（2014）

『br』はテキスト中の改行、『wbr』はブラウザが任意に折り返せる位置のヒント、『ruby』は漢字などのルビ（読み仮名）を表示するための要素です。

構文

<!-- br: 改行（空要素） -->
1行目<br>
2行目

<!-- wbr: 折り返し可能な位置のヒント（空要素） -->
https://www.example.com/very<wbr>/long<wbr>/url<wbr>/path

<!-- ruby: ルビ（読み仮名）表示 -->
<ruby>漢字<rt>かんじ</rt></ruby>

タグ一覧

タグ	概要
br	テキスト中に改行を挿入します。終了タグは不要な空要素です。
wbr	ブラウザが必要と判断した場合に折り返せる位置を示します。折り返しが起きない場合はハイフンなどは表示されません。終了タグは不要です。
ruby	ルビ付きテキストの親要素です。ルビの対象テキストと『rt』要素をまとめます。
rt	ルビのテキスト（読み仮名・注釈）を指定します。『ruby』の子要素として使います。
rp	ルビ非対応ブラウザ向けのフォールバックを指定します。通常は括弧を入れます（例：`<rp>（</rp>`）。

サンプルコード

sample_br_wbr_ruby.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>
<body>

  <!-- brで詩や住所などの改行 -->
  <p>
    東京都千代田区<br>
    丸の内1-1-1<br>
    〒100-0005
  </p>

  <!-- wbrでURLの折り返しヒント -->
  <p>参考URL：https://wp-p.info/docs<wbr>/html<wbr>/elements<wbr>/ruby</p>

  <!-- rubyでルビを付ける -->
  <p>
    <ruby>薔薇<rt>ばら</rt></ruby>は
    <ruby>美<rt>うつく</rt></ruby>しい花です。
  </p>

  <!-- rpでフォールバック -->
  <p>
    <ruby>漢字<rp>（</rp><rt>かんじ</rt><rp>）</rp></ruby>
  </p>

</body>
</html>

実行結果

『br』で改行され、住所が3行に分かれて表示されます。『ruby』のルビはテキストの上に小さく表示されます。

サンプルページはこちら

概要

『br』は詩・住所・歌詞など、改行が内容の一部として意味を持つ場合に使います。単に要素間の余白を空けるためのレイアウト目的での使用は避けてください。余白はCSSの『margin』や『padding』で指定するのが適切です。

『wbr』は長いURLやプログラムの識別子など、スペースなしで続く長い文字列に挿入します。ブラウザの幅が十分にある場合は折り返しが発生せず、見た目に影響しません。幅が足りない場合に、指定した位置で折り返されます。

『ruby』は日本語の教育コンテンツや、読み方を示す必要がある漢字に特に有効です。『rt』要素がルビのテキストを担い、対応ブラウザでは漢字の上部に小さく表示されます。ルビに対応していない古いブラウザ向けに『rp』でフォールバック用の括弧を入れておくと親切です。

対応ブラウザ

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

1 以降 ○

Edge

12 以降 ○

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

15 以降 ○

14 以前 ×

モバイル

iOS Safari

1 以降 ○

Android Browser

4.4 以降 ○

4 以前 ×

Chrome Android

実践的な使い方

各タグの適切な使用場面をまとめます。

タグ	適切な使用場面	避けるべき使い方
<br>	詩の改行、住所の行区切り、メール本文の改行	段落の間隔を空けるための連続使用（CSSのmarginで対応する）
<wbr>	長いURL・ファイルパス・プログラム識別子の折り返し制御	通常の文章への挿入（読みにくくなる）
<ruby>	漢字のふりがな（ルビ）、外来語の発音補助、学習教材	すべての漢字へのルビ（必要な箇所のみに限定する）

<!-- 住所の改行にbrを使う -->
<address>
  株式会社サンプル<br>
  〒100-0001<br>
  東京都千代田区千代田1-1<br>
  サンプルビル5F
</address>

<!-- 長いURLをwbrで折り返し可能にする -->
<p>詳細はこちら: https://example.com<wbr>/docs<wbr>/api<wbr>/reference<wbr>/endpoints</p>

<!-- 漢字にルビを振る -->
<p>
  <ruby>東京<rp>（</rp><rt>とうきょう</rt><rp>）</rp></ruby>は日本の首都です。
</p>

『<ruby>』の『<rp>』タグは、ルビ非対応のブラウザ向けのフォールバックです。現代のブラウザはすべてルビに対応しているため、省略することも多いですが、記述しておくとルビ非対応環境でも括弧付きで読めます。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

HTML辞典

<br> / <wbr> / <ruby>

構文

タグ一覧

サンプルコード

sample_br_wbr_ruby.html

実行結果

概要

対応ブラウザ

実践的な使い方