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.

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

Mobile Browser Support