<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 and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

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