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><ruby> 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.