Path // www.yourhtmlsource.com → Reference → <ruby>

<ruby>

The <ruby> element represents a ruby annotation, which is used to show the pronunciation or meaning of East Asian characters. Ruby annotations are small, annotative text that appears above or beside the base text, commonly used in Japanese (furigana), Chinese (pinyin or zhuyin), and Korean (hanja) typography. The term “ruby” comes from the small font size used in traditional printing.

Page Navigation:
Syntax | Attributes | Examples | When to Use | Related Elements

This page was last updated on 2025-11-17

Syntax

<ruby>
base text
<rp>(</rp><rt>annotation</rt><rp>)</rp>
</ruby>

The element requires opening and closing tags. Inside, you place the base text followed by <rt> elements containing the annotation. The <rp> elements provide fallback parentheses for browsers that don’t support ruby annotations.

Attributes

Global attributes — The <ruby> element supports all global attributes such as id, class, style, lang, and dir.

The <ruby> element has no element-specific attributes. Its behavior is determined by its child elements (<rt> and <rp>).

Examples

Japanese Furigana (Kanji with Hiragana Reading)

<ruby>
東京
<rp>(</rp><rt>とうきょう</rt><rp>)</rp>
</ruby>

This displays “Tokyo” in kanji (東京) with the hiragana reading (とうきょう) above it.

Chinese Pinyin

<ruby>
中国
<rp>(</rp><rt>Zhōng guó</rt><rp>)</rp>
</ruby>

This displays “China” in Chinese characters with pinyin pronunciation above.

Multiple Characters with Individual Annotations

Each character gets its own ruby annotation, which is often preferred for precision.

When to Use

Use the <ruby> element when:

Providing pronunciation guides for Japanese kanji characters (furigana)
Adding pinyin or zhuyin readings to Chinese text
Annotating hanja in Korean text
Creating educational materials for language learners
Publishing content that needs to be accessible to readers unfamiliar with certain characters

Best Practices:

Always include <rp> elements for graceful degradation in older browsers
Use the lang attribute to specify the language of both base text and annotations
Consider using CSS to style the ruby text size and positioning
For complex annotations, annotate each character individually rather than entire words

Browser Support:

Ruby annotations are well-supported in modern browsers. In browsers that don’t support ruby, the annotation will appear inline, surrounded by the parentheses from the <rp> elements.