HTML Tags
HTML Ruby Annotations: <ruby>, <rt> and <rp>
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
| Attribute | Description |
|---|---|
| class | Specifies one or more class names on <ruby>, <rt>, or <rp>. |
| id | Defines a unique identifier for any of the three elements. |
| style | Adds inline CSS styles to the selected element. |
| title | Provides 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+ |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
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.