Open In App

HTML5 <ruby> Tag

Last Updated : 27 Aug, 2024
Summarize
Comments
Improve
Suggest changes
Like Article
Like
Save
Share
Report
News Follow

The <ruby> tag in HTML is used to specify the ruby annotation which is a small text, attached with the main text to specify the meaning of the main text. This kind of annotation is used in Japanese publications.

Syntax: 

<ruby attributes> Contents... </ruby>

Note: <ruby> tag contains two other tags which are listed below: 

  • <rt> tag: It is used to describe the explanation of main text on top of the main text.
  • <rp> tag: It is optional which is used to specify the information which need to show when browsers are not supported ruby annotations.


Example: In this example, we are using the <ruby> tag, which pairs text with a pronunciation guide using the <rt> tag, rendering “GeeksforGeeks” as a ruby annotation for “GFG”.

HTML
<!DOCTYPE html>
<html>

        <body>

            <h1>GeeksforGeeks</h1>
            <h2>&lt;ruby&gt; Tag</h2>
            <!-- html ruby tag is used here -->
            <ruby>GFG<rt>GeeksforGeeks</rt></ruby>
            
        </body>

</html>  

Output: 
 


Supported Browsers: 

HTML5 <ruby> Tag – FAQs

How do I use the <ruby> tag with <rt> and <rp>?

The <ruby> tag is the container for the main text and its annotation. Inside the <ruby> tag, the <rt> tag is used to define the ruby text (annotation), and the <rp> tag can be used to provide fallback parentheses for browsers that don’t support ruby annotations.

Can the <ruby> tag be used for languages other than Japanese and Chinese?

Yes, while it’s primarily used in East Asian languages, the <ruby> tag can be used in any language where you need to display pronunciation guides, annotations, or other supplementary text.

What is the difference between <ruby>, <rt>, and <rp> tags?

The <ruby> tag is the parent element that wraps the main text and annotations. The <rt> tag specifies the annotation (ruby text), and the <rp> tag provides fallback content (such as parentheses) for browsers that don’t support ruby annotations.

How is text displayed when using the <ruby> tag?

In browsers that support ruby annotations, the text inside the <rt> tag is usually displayed above or to the side of the main text within the <ruby> tag, depending on the language and writing mode.

Can I use multiple <ruby> tags within the same sentence or block of text?

Yes, you can use multiple <ruby> tags within the same sentence or block of text to annotate different words or characters.


Next Article

Similar Reads

three90RightbarBannerImg
  翻译: