Description

The HTML element <ruby> is used to define a ruby annotation.

Ruby annotations are used for showing the pronunciation of East Asian characters like Chinese or Japanese characters.

The element <ruby> is used in conjunction with the <rp> and <rt> elements as mentioned below.

  • Element <ruby> is used to show East Asian characters, like Chinese and Japanese characters
  • Element <rt> is used to define the pronunciation for the characters included within the <ruby> element. The pronunciation text enclosed within the <rt> element is displayed as a smaller text over the text enclosed within the <ruby> element.
  • Element <rp> is used to define fall-back parenthesis around the ruby text to indicate the presence of ruby annotation on browsers that don't support ruby annotations.

The below table summarizes its usage.

Usage Details
Placement It is displayed as an Inline element.
Contents It can contain Inline elements and text.
Tags Both the opening and closing tags are required.
Versions HTML 5

Syntax

Here is the basic syntax of the <ruby> element.

<ruby>...</ruby>

Examples

Run this on IDE

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example - HTML Element ruby</title>
</head>
<body>
    <ruby>
        &#28450; <rp>(</rp><rt>Kan</rt><rp>)</rp>
        &#23383; <rp>(</rp><rt>ji</rt><rp>)</rp>
    </ruby>
</body>
</html>

Attributes

The following table shows the list of supported and unsupported attributes for the <ruby> element.

Attribute Type Details
Element-Specific Attributes The tag <ruby> doesn't have any element-specific attributes.
Global Attributes Like all other HTML tags, the tag <ruby> supports the HTML Global Attributes.
Event Attributes The tag <ruby> also supports the HTML Event Attributes.

Browser Compatibility

The tag <ruby> is supported in all modern browsers.

  • Google Chrome 5+
  • Internet Explorer or Edge 5.5+
  • Firefox x
  • Apple Safari 5+
  • Opera 15+

Related Links