<br> / <wbr> / <ruby>

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 such as kanji.

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>かんじ</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

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

  <!-- br: line breaks for a poem, address, etc. -->
  <p>
    東京都千代田区<br>
    丸の内1-1-1<br>
    〒100-0005
  </p>

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

  <!-- ruby: adding phonetic readings -->
  <p>
    <ruby>薔薇<rt>ばら</rt></ruby>は
    <ruby>美<rt>うつく</rt></ruby>しい花です。
  </p>

  <!-- rp: fallback for unsupported browsers -->
  <p>
    <ruby>漢字<rp>（</rp><rt>かんじ</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.

東京都千代田区
丸の内1-1-1
〒100-0005

薔薇（ばら）は美（うつく）しい花です。  ← ruby text appears small above the characters

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 Japanese educational content and anywhere you need to show how kanji are read. 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.