W3docs
en
Log in

HTML <ruby> Tag

The <ruby> tag defines phonetic tips in Japan and East Asian languages. Tag description, attributes and examples of using.

The <ruby> tag defines a ruby annotation. It is used in Japanese and East Asian languages. A ruby annotation is a small additional text linked to the main text for indicating the meaning or pronunciation of the equivalent characters. The fallback parentheses are placed in the <rp> tag. The annotation is displayed in a small print above the characters.

The <ruby> tag is one of the HTML5 elements.

You can use the <ruby> tag with the <rp> and/or <rt> tags. The <ruby> tag consists of one or more characters that need pronunciation or explanation. The <rt> tag provides that information, and the <rp> tag defines alternative text, which is displayed in browsers not supporting the <ruby> tag.

Syntax

The <ruby> tag comes in pairs. The content is written between the opening (<ruby>) and closing (</ruby>) tags.

Example of the HTML <ruby> tag:

HTML <ruby> Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <ruby>
      明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp>
    </ruby>
  </body>
</html>
Try it Yourself »

Result

ruby tag example

Attributes

The <ruby> tag supports the Global Attributes and the Event Attributes.

How to style an HTML <ruby> Tag

ruby {
  color: blue;
}
rt {
  color: red;
}

Practice

Practice

What is the purpose of the HTML <ruby> tag?