HTML Tutorial
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.
<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>
<ruby>
The <ruby>
tag supports a single attribute:
<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><ruby></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.
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.