HTML - <ruby> Tag

The HTML <ruby> tag stands for the Ruby annotation tag. It is used to specify the ruby annotation, which 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.

The <ruby> tag can also be used to represent small annotations that are relevant to the main content, apart from East Asian languages.

  • <rt> tag − describe the explanation of the main text on top of the main text
  • <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.
<ruby> tag contains two other tags, which are listed below −

Syntax

Following is the syntax of <ruby> tag −

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

Example

In the following example, Let’s see the working of <ruby> tag in the HTML documents, as follows −

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

When we run the above code, it will generate an output consisting of the text displayed on the webpage.

Example

Considering the following example, we are creating an HTML document and using the <ruby> tag to explain both East Asian Language Annotation and Normal Annotation as follows −

<!DOCTYPE html>
<html>
<head>
   <style>
      rt {
         font-size: 20px;
         color: green;
      }
   </style>
</head>
<body>
   <h1>Example of 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>

On running the above code, the output window will pop up displaying the text along with CSS applied to it on the webpage.

html_tags_reference.htm
Advertisements