HTML <rt> Tag

The <rt> (ruby text) element in HTML is used to provide pronunciation, transliteration, or short annotations for East Asian typography, particularly in conjunction with the <ruby> element. It is primarily intended for displaying small, supplementary text above or alongside base text (often Chinese, Japanese, or Korean characters) to guide pronunciation or clarify meaning.

The <rt> element is always nested within a <ruby> element, which acts as a container for both the base text and its annotations. The typical structure looks like this:

<ruby>
  漢 <rt>kan</rt>
  字 <rt>ji</rt>
</ruby>

In this example:

• 漢 and 字 are the base characters.
• <rt>kan</rt> and <rt>ji</rt> provide the pronunciation guide for each character.

Key characteristics:

1. Purpose: To provide short, inline annotations that clarify how a character or word is pronounced or understood.
2. Display: By default, the browser renders <rt> content above the base text in horizontal writing modes, or to the side in vertical writing modes. The exact placement may vary depending on the writing mode and the browser’s rendering.
3. Usage Context: <rt> is essential in East Asian languages where a character may have multiple pronunciations or where readers may need guidance. It can also be used for technical or phonetic annotations in other scripts, though this is less common.
4. Combination with <rp>: Often used alongside the <rp> element, which provides fallback parentheses for browsers that do not support ruby annotations.

Example with <rp> for fallback:

<ruby>
  漢<rp>(</rp><rt>kan</rt><rp>)</rp>
  字<rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>

Here, browsers that don’t support ruby annotations will show (kan)(ji) instead of the ruby above the characters.

The <rt> element is semantically meaningful, ensuring that screen readers and other assistive technologies understand the annotation, which makes it an important tool for accessibility in multi-lingual or educational content.