HTML Tutorial

HTML Tag: <ruby>

The <ruby> tag in HTML enables you to provide pronunciations for East Asian characters, such as Japanese Kanji and Chinese Hanzi. It serves as a valuable accessibility tool, particularly for individuals who may be unfamiliar with the specific characters being used.

Usage of <ruby>

To use the <ruby> tag, simply enclose the East Asian character(s) within the tag. Then, use the <rt> tag to provide the pronunciation or phonetic representation of the character, enclosed within parentheses.

<ruby>漢字</ruby> <rt>(kanji)</rt>

Attributes of <ruby>

The <ruby> tag supports a single attribute:

  • title: Specifies a tooltip that appears when the mouse hovers over the ruby annotation.

Examples with <ruby>

Here are some examples of how to use the <ruby> tag:

<ruby>東京</ruby> <rt>(Tokyo)</rt>
<ruby>中国</ruby> <rt>(Zhongguo)</rt>
<ruby title="The character for 'person'">人</ruby> <rt>(ren)</rt>

Exploring the <ruby> Tag: An HTML Example

The following HTML example demonstrates the use of the <ruby> tag:

<!DOCTYPE html>
<html>
<head>
  <title>Ruby Tag Example</title>
</head>
<body>
  <h1>東 京 (Tokyo)</h1>
  <p>This is an example of the <code>&lt;ruby&gt;</code> tag, which provides pronunciation support for East Asian characters.</p>
</body>
</html>

When you view this HTML document in a web browser, you will see the text "東 京" with a small pronunciation guide "(Tokyo)" appearing above the characters. This helps non-native speakers or those unfamiliar with the characters to understand the pronunciation and meaning of the text.

Conclusion

The <ruby> tag is a valuable accessibility tool that can enhance the user experience for websites targeting East Asian audiences. It allows authors to provide pronunciation guides for characters that may be unfamiliar to non-native readers, improving overall accessibility and ease of use.