Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

HTML Tags

HTML Ruby Annotations: <ruby>, <rt> and <rp>

Written by Published

Learn how the HTML <ruby>, <rt>, and <rp> elements create pronunciation and explanatory annotations with fallback punctuation.

HTML ruby annotations display short pronunciation or explanatory text alongside base text, especially in East Asian typography.
The <ruby> element wraps the annotation, <rt> provides the annotation text, and <rp> provides fallback punctuation for browsers that cannot display ruby annotations.

Syntax

html

<ruby>
  漢
  <rp>(</rp>
  <rt>kan</rt>
  <rp>)</rp>
</ruby>

Attributes

AttributeDescription
classSpecifies one or more class names on <ruby>, <rt>, or <rp>.
idDefines a unique identifier for any of the three elements.
styleAdds inline CSS styles to the selected element.
titleProvides additional information as a tooltip when hovered.

Example

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ruby Annotation Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 30px;
    }

    ruby {
      font-size: 2rem;
    }

    rt {
      color: #007a96;
      font-size: 0.55em;
    }
  </style>
</head>
<body>
  <h1>Japanese Ruby Annotation</h1>

  <p>
    <ruby>
      漢<rp>(</rp><rt>kan</rt><rp>)</rp>
      字<rp>(</rp><rt>ji</rt><rp>)</rp>
    </ruby>
    means "Chinese characters."
  </p>
</body>
</html>

Browser Support

Chrome
Edge
Firefox
Safari
Opera
IE9+
YesYesYesYesYesYes

The <ruby>, <rt>, and <rp> elements are supported by all major modern browsers.

Notes

  • Place the base text and its annotation inside <ruby>.
  • Use <rt> as a child of <ruby> to provide pronunciation, transliteration, translation, or another short annotation.
  • Place <rp> immediately before or after <rt> to provide fallback punctuation, usually parentheses.
  • Browsers with ruby support hide the <rp> text and position the <rt> annotation beside the base text.
  • A single <ruby> element can contain more than one base-text and annotation pair.
  • The <ruby> closing tag is required. Although some <rt> and <rp> end tags may be omitted in limited cases, writing them explicitly keeps the markup clear.

Conclusion

The <ruby>, <rt>, and <rp> elements work together to create readable ruby annotations with a text fallback.
Use them for short pronunciation or explanatory annotations that belong directly with the base text.

PreviousHTML <data> TagNextHTML <svg> Tag