HTML <ruby> Element
The HTML <ruby> element represents text with ruby annotations, which provide pronunciation, translation, or short explanatory information for the associated characters.
Syntax
<ruby>
漢 <rp>(</rp><rt>かん</rt><rp>)</rp>
</ruby>The <ruby> element requires both an opening and closing tag. The base text is placed inside the element along with an <rt> element containing its annotation. Optional <rp> elements can provide fallback punctuation.
Attributes
The <ruby> element supports the global HTML attributes. It does not have any element-specific attributes.
Example
This example uses the <ruby> element with <rt> elements to display pronunciation annotations for Japanese characters.
Usage Notes
Ruby annotations are commonly used with East Asian writing systems to show the pronunciation or meaning of characters that readers may not immediately recognize.
The text being annotated is known as the base text. Its corresponding annotation is placed inside an <rt> element within the <ruby> element.
A single <ruby> element can contain multiple pieces of base text and their corresponding <rt> annotations. This makes it possible to associate pronunciations with individual characters or groups of characters.
The optional <rp> element can place parentheses or other punctuation around an annotation when ruby formatting is not supported. Browsers that properly render ruby annotations normally hide the <rp> content.
Supporting browsers usually display ruby annotations in smaller text above the base text for horizontal writing or beside it for some vertical writing layouts.
Accessibility
Ruby annotations can improve the readability of text by providing pronunciation or explanatory information directly alongside the characters they describe.
Keep annotations short and clearly associated with the correct base text. When pronunciation or explanatory information is essential to understanding the content, make sure the annotation accurately communicates that information rather than relying only on visual formatting.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: HTML <ruby> Element .
Related Elements
The <ruby> element is closely related to the <rt> element that contains the annotation and the <rp> element that provides optional fallback punctuation.