<ruby> Tag in HTML | Ruby Annotation

The <ruby> tag in HTML is used to define a ruby annotation, typically for East Asian languages. It is used to display additional information like pronunciation above or next to the main text, often used for Chinese or Japanese characters. The <rt> tag is typically used in conjunction with <ruby> to define the annotation text.

Key Points on <ruby> Tag:

The <ruby> tag is used to create ruby annotations, providing pronunciation or additional information for the text within.
The <rt> tag must be used within the <ruby> tag to specify the ruby text (annotation) for the main text.
Commonly used in languages like Japanese and Chinese, ruby annotations help readers understand how to pronounce complex characters.
The <ruby> tag itself is typically used for individual characters or short phrases, whereas <rt> holds the pronunciation or annotation for those characters.
If ruby annotations are not supported by a browser, the content will still be readable, but the additional pronunciation won't be shown.

Syntax of <ruby> Tag:

Syntax Example

<ruby>Main Text<rt>Ruby Text</rt></ruby>

Example of <ruby> Tag in HTML:

This example demonstrates how to use the <ruby> tag with <rt> to create a pronunciation guide for Japanese text.

Code Example

<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>HTML <ruby> Tag Example</title>
        </head>
        <body>
            <h1>HTML <ruby> Tag Example</h1>
            <p>
                <ruby>漢字<rt>Kanji</rt></ruby>
            </p>
        </body>
        </html>

Output

HTML ruby Tag Example

漢字Kanji

The <ruby> tag is essential for creating ruby annotations, often used in East Asian languages to show pronunciation or additional context for text. It enhances readability and comprehension by providing supplementary information like phonetic readings of characters.