<rt>

Defines ruby text annotation for pronunciation or translation

✨ HTML5

Definition and Usage

The <rt> element establishes the ruby text component of a ruby annotation, which is used to provide pronunciation, translation, or transliteration for East Asian typography.

The <rt> element must be contained within a <ruby> element and appears as small text above (or beside) the base text.

Ruby annotations are commonly used for:

Japanese: Furigana (kana pronunciation above kanji characters)
Chinese: Pinyin (romanization above Chinese characters)
Korean: Hanja pronunciation guides
Translations: Short translations or definitions above text

Tip: The <rt> tag must be used inside a <ruby> element. It provides the annotation text that appears above or beside the base text.

Note: Use the <rp> tag to provide fallback parentheses for browsers that don't support ruby annotations.

Browser Support

The <rt> tag is supported in all major browsers:

Chrome

5.0+

Firefox

38.0+

Safari

5.0+

Edge

79.0+

Opera

15.0+

Attributes

The <rt> tag supports the Global Attributes in HTML.

The <rt> tag also supports the Event Attributes in HTML.

Examples

Japanese Furigana

Add pronunciation guide for Japanese kanji:

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

Chinese Pinyin

Add pinyin pronunciation for Chinese characters:

Example
<ruby>
  汉字
  <rt>hàn zì</rt>
</ruby>

Korean Hanja

Add pronunciation for Korean hanja characters:

Example
<ruby>
  大韓民國
  <rt>대한민국</rt>
</ruby>

With Fallback Parentheses

Use <rp> tags for browsers that don't support ruby:

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

Multiple Ruby Annotations

Add annotations to multiple words in a sentence:

Example
<p>
  <ruby>日本語<rt>にほんご</rt></ruby>を
  <ruby>勉強<rt>べんきょう</rt></ruby>します。
</p>

Styled Ruby Annotations

Customize the appearance of ruby text with CSS:

Example
<style>
  ruby {
    font-size: 24px;
  }

  rt {
    font-size: 12px;
    color: #745af2;
    font-weight: 600;
  }
</style>

<ruby>
  北京
  <rt>Běijīng</rt>
</ruby>

How Ruby Annotations Work

Ruby annotations consist of three main components:

<ruby>: The container element that wraps the base text and annotation
Base text: The main text (e.g., kanji, Chinese characters) that appears normally
<rt>: The annotation text that appears above or beside the base text
<rp> (optional): Parentheses shown only in browsers without ruby support

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

East Asian Typography Use Cases

Japanese Learning Materials: Show hiragana or katakana pronunciation above kanji for language learners
Chinese Education: Display pinyin romanization to help readers pronounce Chinese characters
Korean Texts: Provide hangul pronunciation for hanja (Chinese characters used in Korean)
Dictionaries: Show pronunciation or definitions above words
Children's Books: Help young readers learn character pronunciation
Foreign Names: Provide pronunciation guides for names in different scripts

Try it Yourself

Interactive Example

Here are live examples of ruby annotations:

東京Tokyo - Japanese city name

北京Běijīng - Chinese city name

大韓民國Daehan Minguk - Korea

Try in Code Playground

Best Practices

Always use <rt> inside a <ruby> element
Include <rp> tags for fallback support in older browsers
Keep ruby text concise - it should be shorter than or equal to the base text
Use appropriate font sizes to ensure ruby text is readable but not overwhelming
Consider the target audience - language learners may need more annotations than native speakers
Test in multiple browsers to ensure consistent rendering
Use semantic HTML structure for better accessibility

Related Tags

<ruby>
Defines a ruby annotation container
<rp>
Defines fallback parentheses
<rb>
Defines ruby base text
<rtc>
Defines ruby text container
<rbc>
Defines ruby base container