<ruby>

The HTML <ruby> element creates a ruby annotation, offering supplementary text like pronunciation or translation above or beside East Asian characters to facilitate reading.

ruby tag

The <ruby> tag in HTML is used to display annotations for East Asian text, often to show pronunciation or clarifying information. It's commonly paired with the <rt> tag for the annotation and the <rp> tag for fallback parentheses when ruby text isn't supported.

Syntax

index.html

<ruby>
  Base Text
  <rt>Pronunciation</rt>
</ruby>

`ruby` Demo

Read the word with ruby annotation: 漢字Kanji.

index.html

<p>
  Read the word with ruby annotation: 
  <ruby>漢字<rt>Kanji</rt></ruby>.
</p>

Attributes

This element only includes the attributes.

<rt>: Specifies the annotation or pronunciation for the <ruby> element.
<rp>: Adds parentheses around the ruby text as a fallback for browsers that don't support <ruby> and <rt>.

Example with `<rp>`

漢字Kanji (Kanji)

index.html

<ruby>
  漢字<rt>Kanji</rt>
  <rp>(</rp><rt>Kanji</rt><rp>)</rp>
</ruby>

Key Points

Purpose: The <ruby> tag is used to show annotations or pronunciation for characters, mainly in East Asian scripts.
Browser Support: While support may differ, most modern browsers handle basic <ruby> and <rt> elements.
Usage: Often applied in educational or language-learning materials to display pronunciation or explanation of text.

Conclusion

The <ruby> tag in HTML is used to add annotations, like pronunciation or definitions, to East Asian text. It is typically paired with the <rt> tag for the annotation and the <rp> tag for fallback content in browsers that don't support ruby annotations. This tag is especially helpful in educational or language-learning materials. While most modern browsers support it, it ensures better comprehension of complex scripts, especially in languages such as Japanese or Chinese.

<rtc>

The HTML <rtc> element, used with <ruby>, identifies portions of ruby annotations that can be omitted by certain browsers or rendering systems, enabling selective visibility of ruby text.

<s>

The HTML <s> element denotes text that is no longer relevant or correct, usually shown with a strike through to indicate its inaccuracy or inapplicability.