Using ruby HTML Tag

ruby HTML: Main Tips

• <ruby> tag represents ruby annotations for East Asian characters.
• It is used to convey the right pronunciation, as some characters have multiple options.
• HTML ruby tag was introduced in HTML5 and supports all global attributes.
• You cannot omit the ending tag.

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 50% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

Providing Ruby Annotations

HTML ruby tags are used to provide the information on how to pronounce Japanese, Chinese, and Korean characters:

<ruby>攻殻
  <rp>（ </rp>
  <rt>こrうかく</rt>
  <rp> ）</rp>
  機動隊
  <rp>（ </rp>
  <rt>きsどうたtい</rt>
  <rp> ）</rp>
</ruby>

As you can see in the example above, there are a few elements used for HTML ruby annotations:

• <ruby> defines a connection between the base text and the ruby HTML text.
• <rt> specifies the ruby HTML text element, which may contain inline elements.
• <rp> surrounds the ruby parentheses for the browsers that do not support ruby HTML text.

Note: the level of support for ruby annotations differs greatly between browsers and their versions: you can check it here.

Browser Support

Chrome

5+

Edge

All

Firefox

38+

IE

5+

Opera

15+

Safari

5+

Mobile Browser Support

Chrome

All

Firefox

38+

Opera

14+

Safari

All