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

<rt>

by Ross Shannon

The <rt> element specifies the ruby text component of a ruby annotation. This is the actual annotation text that appears above or beside the base characters, typically providing pronunciation guidance (such as furigana for Japanese or pinyin for Chinese) or semantic information. The <rt> element must be used within a <ruby> element.

Clock This page was last updated on 2025-11-17


Syntax

<ruby>
  base text
  <rt>annotation text</rt>
</ruby>

The <rt> element requires both opening and closing tags. The content between the tags is the annotation text that will be displayed above or beside the base text. In HTML5, the closing tag can be omitted if immediately followed by another <rt>, <rp>, or the closing </ruby> tag, but explicit closing is recommended for clarity.

Attributes

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

The <rt> element has no element-specific attributes. Use the lang attribute when the annotation language differs from the base text.

Examples

Basic Ruby Text

<ruby>
  漢字
  <rt>かんじ</rt>
</ruby>

Displays “kanji” (漢字) with its hiragana reading (かんじ) above.

With Fallback Parentheses

<ruby>
  学校
  <rp>(</rp><rt>がっこう</rt><rp>)</rp>
</ruby>

Shows “school” (学校) with pronunciation. Non-supporting browsers display: 学校(がっこう)

Multiple Annotations

<ruby>
  日<rt>にち</rt>
  本<rt>ほん</rt>
  語<rt>ご</rt>
</ruby>

Each character in “Japanese language” (日本語) has its own annotation.

When to Use

Use the <rt> element when:

  • Providing pronunciation for Japanese kanji characters
  • Adding pinyin readings to Chinese text
  • Including phonetic annotations for Korean hanja
  • Creating language learning materials
  • Making East Asian text accessible to non-native readers

Styling Considerations:

  • Ruby text is typically displayed at about half the size of the base text
  • Use CSS to adjust size, color, and positioning if needed
  • The ruby-position CSS property controls whether annotations appear above or below
  • Consider readability when styling — too small may be illegible

Content Guidelines:

  • Keep annotations concise and directly related to the base text
  • For pronunciation, use the appropriate phonetic system for the language
  • Ensure the annotation accurately represents the intended reading
  • <ruby> — The container element for ruby annotations
  • <rp> — Provides fallback parentheses for browsers without ruby support
  • <bdo> — Bidirectional text override
  • <span> — Generic inline container