HTML <ruby> Tag Tutorial

The <ruby> tag is used to specify annotations for pronunciations of East Asian characters or characters that are used in phonetic systems. It is most commonly used in conjunction with the <rp> and <rt> tags to provide pronunciation information for the text enclosed by the <ruby> tag.

How to use the <ruby> tag:

The <ruby> tag should be used to enclose the text that needs pronunciation information. Inside the <ruby> tag, you should use the <rb> tag to specify the base text and the <rt> tag to specify the pronunciation information. The <rp> tag is used to provide fallback parentheses for browsers that do not support ruby annotations.

Here is an example of how to use the <ruby> tag:

<ruby>
  <rb>漢</rb>
  <rt>ㄏㄢˋ</rt>
</ruby>

In this example, the base text is the character 漢 (<rb>漢</rb>) and the pronunciation is ㄏㄢˋ (<rt>ㄏㄢˋ</rt>).

Attributes of the <ruby> tag:

Attribute	Description
class	Specifies one or more class names for the element.
id	Specifies a unique id for the element.
style	Specifies an inline CSS style for the element.

These are the main attributes of the <ruby> tag that you can use to style or target the element using CSS or JavaScript.