The HTML <ruby> element represents a ruby annotation. Ruby annotations are for showing pronunciation of East Asian characters.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
| Content categories | Flow content, phrasing content, palpable content. |
|---|---|
| Permitted content | Phrasing content. |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that accepts phrasing content. |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | Any |
| DOM interface | HTMLElement |
Attributes
This element only includes the global attributes.
Examples
Example 1: Character
<ruby> 漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp> </ruby>
Example 2: Word
<ruby> 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> </ruby>
Specifications
| Specification | Status | Comment |
|---|---|---|
| HTML Living Standard The definition of '<ruby>' in that specification. |
Living Standard | |
| HTML5 The definition of '<ruby>' in that specification. |
Recommendation |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
ruby | Chrome Full support 5 | Edge Full support 12 | Firefox Full support 38 | IE Full support 5 | Opera Full support 15 | Safari Full support 5 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 38 | Opera Android Full support 14 | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support