HTML <rt> Tag

The HTML <rt> tag is used to define ruby text within a <ruby> element. Ruby text provides pronunciation guides or annotations for East Asian typography, such as Chinese, Japanese, or Korean characters. The <rt> tag is used in combination with the <ruby> tag and optionally the <rp> tag.

The <rt> tag is specifically designed to display the pronunciation or transliteration of the base text, usually rendered above or beside the main content.

Basic Syntax of HTML <rt> Tag

The <rt> tag is always nested within a <ruby> element, as shown below:

</>
Copy
<ruby>
    Base Text
    <rt>Ruby Text</rt>
</ruby>

The <rt> tag contains the ruby annotation for the base text defined in the <ruby> element.

Example of Using the <rt> Tag

Here’s an example of how the <rt> tag is used to add a pronunciation guide for Chinese characters:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Ruby Annotation Example</h2>
        <p>
            <ruby>
                漢字
                <rt>kanji</rt>
            </ruby>
        </p>
    </body>
</html>
Example of Using the <rt> Tag

Explanation: In this example, the base text “漢字” is annotated with “kanji” as its pronunciation. Browsers that support the <ruby> and <rt> tags display the annotation above or beside the base text.

Attributes of HTML <rt> Tag

  • No Specific Attributes: The <rt> tag does not have any specific attributes.
  • Global Attributes: Supports all global attributes, such as id, class, and style.

You can use global attributes to style or manipulate the <rt> tag with CSS or JavaScript.

Styling the <rt> Tag with CSS

The <rt> tag can be styled to customize the appearance of the ruby annotation, such as adjusting its size, color, or position:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            rt {
                font-size: 0.8em;
                color: #007BFF;
                font-style: italic;
            }
        </style>
    </head>
    <body>
        <h2>Styled Ruby Annotation</h2>
        <p>
            <ruby>
                漢字
                <rt>kanji</rt>
            </ruby>
        </p>
    </body>
</html>
Styling the <rt> Tag with CSS

Result: The ruby annotation text (“kanji”) is styled in blue, italicized, and slightly smaller than the base text.

Accessibility Benefits of the <rt> Tag

The <rt> tag improves accessibility by providing additional information about complex characters or words. Screen readers can recognize and announce the ruby text, helping users understand the content.

Practical Applications of the <rt> Tag

  • Language Learning: Provide pronunciation guides for East Asian characters to assist learners.
  • Accessibility: Help readers understand complex or unfamiliar words with annotations.
  • Typographic Enhancement: Add additional details or emphasis to characters in languages requiring ruby text.
  • Cross-Language Support: Display translations or explanations alongside native text.