HTML - <ruby> Tag

HTML <ruby> tag used to specify the ruby annotation. It is a small text attached to the main text to specify the meaning of the main text. Usually used for showing the pronunciation of east Asian characters like Chinese and Japanese. This is a new tag included in HTML5. It can also be used to represent small annotations that are relevant to the main content.

Syntax

<ruby>.....</ruby>

Attribute

HTML ruby tag supports Global and Event attributes of HTML.

Examples of HTML ruby Tag

In the following examples we will see the use cases, where and how to use the HTML ruby tag to specify the ruby annotation.

Specifying ruby Element

In the following example, let’s see the working of <ruby> tag in the HTML documents.

<!DOCTYPE html>
<html>
<head>
   <style>
      ruby {
         font-size: 30px;
         font-style: italic;
         color: red;
      }
   </style>
</head>
<body>
   <h1>Tutorialspoint</h1>
   <h2>HTML ruby Tag</h2>
   <!-- here, using ruby tag -->
   <ruby>
      TP <rt>tutorialspoint </rt> EL <rt> Easy to learn </rt>
   </ruby>
</body>
</html>

East Asian Language and Normal Annotation

Considering the following example, we are creating the <ruby> element to explain both East Asian Language Annotation and Normal Annotation.

<!DOCTYPE html>
<html>
<head>
   <style>
      rt {
         font-size: 20px;
         color: green;
      }
   </style>
</head>
<body>
   <h1>HTML ruby Tag</h1>
   <p>East Asian Language Annotation</p>
   <ruby> 小弟弟 <rt>Small Brother</rt>
   </ruby>
   <p>
      Normal Annotation Representation of Manufactured date
   </p>
   <ruby> 19 <rp>(</rp>
      <rt>Date</rt>
      <rp>)</rp> 06 <rp>(</rp>
      <rt> Month</rt>
      <rp>)</rp> 2023 <rp>(</rp>
      <rt>Year</rt>
      <rp>)</rp>
   </ruby>
</body>
</html>

Tags used with HTML ruby Tag

HTML <rt> Tag Describe the explanation of the main text on top of the main text
HTML <rp> Tag This is an optional tag that is used to specify the information that needs to be shown when the browser does not support the Ruby annotations.

Supported Browsers

Tag
ruby	Yes 5.0	Yes 5.5	Yes 38.0	Yes 5.0	Yes 15.0

html_tags_reference.htm