<br> / <wbr> / <ruby>

Since:		HTML5（2014）

br inserts a line break in text, wbr hints to the browser where it may optionally wrap a line, and ruby displays ruby text (phonetic annotations) above characters.

Syntax

<!-- br: line break (void element) -->
Line 1<br>
Line 2

<!-- wbr: optional line-break hint (void element) -->
https://www.example.com/very<wbr>/long<wbr>/url<wbr>/path

<!-- ruby: phonetic annotation -->
<ruby>漢字<rt>Kanji</rt></ruby>

Tag list

Tag	Description
br	Inserts a line break in text. It is a void element and requires no closing tag.
wbr	Marks a position where the browser may break the line if needed. No hyphen or other character is shown when no break occurs. No closing tag is required.
ruby	The parent element for ruby-annotated text. It wraps the base text and the `rt` element together.
rt	Specifies the ruby text (phonetic reading or annotation). Used as a child of `ruby`.
rp	Provides a fallback for browsers that do not support ruby. Typically contains parentheses (e.g., `<rp>(</rp>`).

Sample code

sample_br_wbr_ruby.html

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

  <!-- br: line breaks for a poem, address, etc. -->
  <p>
    1-1-1 Marunouchi,<br>
    Chiyoda-ku, Tokyo<br>
    ZIP: 100-0005
  </p>

  <!-- wbr: optional break hint for a long URL -->
  <p>Reference URL: https://wp-p.info/docs<wbr>/html<wbr>/elements<wbr>/ruby</p>

  <!-- ruby: adding phonetic readings (example using Japanese Kanji) -->
  <p>
    <ruby>漢字<rt>Kanji</rt></ruby> means
    <ruby>Japanese<rt>characters</rt></ruby> writing system.
  </p>

  <!-- rp: fallback for unsupported browsers -->
  <p>
    <ruby>汉字<rp>(</rp><rt>Hànzì</rt><rp>)</rp></ruby>
  </p>

</body>
</html>

Output

The br element breaks the address into three lines. The ruby annotation appears in small text above the base characters.

View sample page

Notes

Use br when a line break is meaningful as part of the content — for example in poetry, addresses, or lyrics. Do not use it simply to add vertical space between elements. Use the CSS margin or padding properties for layout spacing instead.

Insert wbr inside long strings that have no spaces, such as long URLs or identifiers. When the container is wide enough, no break occurs and the element has no visual effect. When the width is insufficient, the browser wraps at the marked position.

ruby is especially useful in East Asian language content (Chinese, Japanese, Korean) and anywhere you need to show pronunciation or annotation above characters. The rt element carries the annotation text and, in supporting browsers, is displayed in small text above the base character. Adding rp parentheses as a fallback is a good practice for older browsers that do not support ruby.

Practical Use Cases

A summary of appropriate and inappropriate uses for each tag.

Tag	Appropriate Use	Avoid
<br>	Line breaks in poetry, address formatting, email body line breaks	Multiple consecutive uses to create paragraph spacing (use CSS margin instead)
<wbr>	Controlling line-break opportunities in long URLs, file paths, or identifiers	Inserting into normal prose (makes text harder to read)
<ruby>	Furigana (phonetic readings) for kanji, pronunciation guides for foreign words, learning materials	Adding ruby to every kanji (use only where needed)

<!-- Using br for address formatting -->
<address>
  Anthropic<br>
  548 Market St, PMB 90375<br>
  San Francisco, CA 94104
</address>

<!-- Making a long URL breakable with wbr -->
<p>See details at: https://example.com<wbr>/docs<wbr>/api<wbr>/reference<wbr>/endpoints</p>

<!-- Adding furigana (ruby reading) to kanji -->
<p>
  <ruby>東京<rp>（</rp><rt>とうきょう</rt><rp>）</rp></ruby> is the capital of Japan.
</p>

The <rp> tag inside <ruby> provides a fallback for browsers that do not support ruby. Since all modern browsers support ruby, <rp> is often omitted, but including it ensures the text is still readable in parentheses in non-supporting environments.