Welcome to HTML5-Tutorials

Our site offers a lot of HTML5 learning from absolutely beginning to advanced level.If you want to make a website with HTML,this site will completely guide you a lot.So learn HTML5 syntax and form of coding easily with this website.If you have any doubt,leave a message on us.We will return you so soon.This site includes innumerable number of references you need to do after studying their corresponding elements.

In this page,we will learn about HTML <ruby> tag.

Use of <ruby> tag

The <ruby> tag defines a ruby annotation.
Ruby annotation is used in translation or pronunciation for East Asian typography.
It should be used with <rp> tag and <rt> tag.

Display:Inline

Example of <ruby> tag

<ruby>
    印度 <rt> India </rt>
<ruby>

Supported Browsers.

Tag
<ruby> 5.0 or higher 5.5 or higher 38.0 or higher 5.0 or higher 15.0 or higher

Full Code Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ruby>
    印度 <rt> India </rt>
<ruby>
</body>
</html>

Output

印度 India

More Reference

The <ruby> tag is new in HTML5.
Ruby annotations are used for describing languages in mostly Asian Languages.

<rp> v/s <rt> tag

<rt> tag is used within the <ruby> element to simply make annotations above the base character whether supported by the current browsers or not while the <rp> tag is used to provide fall-back parenthesis for browsers that do not support the ruby annotations like 印度 India

How to produce ruby annotations by using <ruby> tag <rp> tag and <rt> tag?

1. To produce ruby annotations, all the elements should be contained within the <ruby> element.

<ruby>
</ruby>

2. Write the language (usually chinese or korean) you want to make as base in which the annotation has to be attached.

<ruby>
   印度
</ruby>

3. One <rp> element must enclose the left parenthesis,( while the other <rp> element must enclose the right parenthesis,).

<ruby>
   印度 <rp>(</rp> <rp>)</rp>
</ruby>

4. Add the annotations using <rt> element within the parenthesis which is also between </rp> and <rp> tags.

<ruby>
   印度 <rp>(</rp> <rt>India</rt> <rp>)</rp>
</ruby>

Output is here

印度 ( India )

Output without <ruby> element

印度 ( India )

Some web experts use the following shortcuts to make ruby annotations.

<ruby>
   <rb>印度</rb> <rt>India</rt>
</ruby>

印度 India