❮ Previous Next ❯

HTML <ruby> tag

The <ruby> tag is used to create ruby annotations. Ruby annotation is used in translation or pronunciation for East Asian typography.
It should be used with <rp> tag and <rt> tag. The annotation text is usually shown at the above of the original character.

Type: Inline Element

Example of <ruby> tag

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

<ruby> tag is introduced in HTML5.

Full code example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ruby>
  印度 <rp>(</rp><rt>India</rt><rp>)</rp> and 
  美国 <rp>(</rp><rt>America</rt><rp>)</rp>
  are the two powerful military countries.
</ruby>
</body>
</html>
Run The code »

Output on the browser

印度 (India) and 美国 (America) are the two powerful military countries.

Supported Browsers

Tag Chrome Internet Explorer Firefox Safari Opera Mini
<rp> 5.0 or higher 5.5 or higher 38.0 or higher 5.0 or higher 15.0 or higher

Ruby annotations are used to show the pronunciation or reading of text, mainly in East Asian languages.

How do we create ruby annotations using the <ruby>, <rt>, and <rp> tags?

  1. To create ruby annotations, all the elements should be contained within the <ruby> element. 
     <ruby>
 </ruby>
  2. Write the language (usually Chinese or Korean) in which you want to make as base text 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 between the parenthesis which is also between the </rp> tag and <rp> tag. 
    <ruby>
印度 <rp>(</rp><rt>India</rt><rp>)</rp>
</ruby>

Without <ruby> element, the output will look like- 印度 India

Some web experts use the following shortcut to make ruby annotations, but the output will be same.

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

Difference between <ruby>, <rb>, <rp> and <rt>

Tag Full name Note
<ruby> Ruby container creates original character and annotation
<rb> Ruby base wraps the base character.
Optional in HTML5.
<rp> Ruby parenthesis creates fallback character for unsupported browser.
<rt> Ruby text holds the translated text.
❮ Previous Next ❯