HTML <ruby> element is employed to display ruby annotations on a webpage. These annotations are beneficial when indicating the pronunciation of East Asian characters such as Chinese and Japanese.
The <ruby> tag enclosed one or more <rt> elements which give the pronunciation of ruby annotations and displays above the annotation characters. It can also contain <rp> (optional) element which is used as a fall-back parenthesis for the browser which does not support the ruby annotation.
HTML <ruby> tag serves as a way to indicate a brief annotation that is pertinent to the primary content, in addition to East Asian characters.
The <ruby> tag is new in HTML5.
Syntax
<ruby>......</ruby>
Here are some details regarding the HTML <ruby> element:
| Display | Inline |
|---|---|
| Start tag/End tag | Both Start and End tag |
| Usage | formatting |
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML ruby tag</title>
<style>
body{
text-align: center;
}
rt{ font-size: 10px;
color: green;
}
</style>
</head>
<body>
<h1>Example of ruby tag</h1>
<p>East Asian Langugae Annotation</p>
<ruby>
大哥<rt>Big Brother</rt>
</ruby>
<p>Noraml Annotaion Representation of Expiry date</p>
<ruby>
2022<rp>(</rp><rt>Year</rt><rp>)</rp>
12<rp>(</rp><rt> Month</rt><rp>)</rp>
06<rp>(</rp><rt>Date</rt><rp>)</rp>
</ruby>
</body>
</html>
Output:
Attribute:
Tag-specific attributes:
The <ruby> tag does not possess any particular attribute.
Global attribute:
The <ruby> tag facilitates the utilization of the global attributes within HTML.
Event attribute:
The <ruby> tag enables the utilization of event attributes within HTML.
Supporting Browsers
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
<ruby> |
Yes | Yes | Yes | Yes | Yes |