HTML <ruby> Tag


ATTENTION: THIS PAGE IS Valid HTML 5 AND IS BEST VIEWED WITH HTML 5 - Please upgrade your browser or download one of the HTML 5 compatible browsers such as Mozilla Firefox, Chrome, Opera or IE 9 (March 14, 2011 or later). For more information see HTML 5 browsers.

If you find this helpful, please click the Google +1 Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

PDF mobile

The <ruby> Tag in HTML 5

The <ruby> tag is used to mark up base text which is to be annotated with supplemental text. It is one of the formatting tags in HTML 5. The supplemental text is used to provide an aid to reading the base text, such as:

  • the pronunciation of the base text
  • syllabic characters, used primarily in East Asian languages, such as the hiragana form of katakana text, called furigana in Japanese
  • an alternate form of the base text, such as the romanji form of katakana text

It is also possible to use the image (<img>) tag to include images in either the base text or ruby annotations.

(ru) (bi)

This is an actual working example of the <ruby> tag example code below, showing how the code looks in your browser. In a WebKit browser, such as Safari or Chrome, it looks like this:

ruby in webkit

In a browser that does not support the ruby element, the <rt> ruby text will be displayed with the <rp> ruby parenthesis like this:

ruby parentheses
Alternatives to the <ruby> Tag

Instead of the <ruby> tag, there are a number of other approaches to annotate content in different written languages:

Annotate with plain old text content:
日本語: ブックマーク 同期   English: Bookmark now
If it is an <a href> link, just add the title attribute (hover the mouse over the link to see the popup text):
Add a span element with a title attribute and a style to indicate popup help is available:

<ruby> Tag Syntax

Rules for coding HTML ruby elements
   ... phrasing content expected ...
   <ruby>... phrasing content ...
      <rp> (</rp><rt>... phrasing content ...</rt><rp>) </rp>
Rules for coding HTML ruby elements

Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.

  1. Code the ruby element for ruby annotated text where phrasing content is expected.
  2. Begin the ruby element with a starting <ruby> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
  3. Include any HTML global attributes on the <ruby> tag as appropriate.
  4. Inside the ruby element, between the starting <ruby> tag and the ending </ruby> tag, code the inner HTML phrasing content as appropriate, along with any rt elements optionally bracketed with rp elements.
  5. End the ruby element with a matching </ruby> closing tag.
Content Model
Content of the ruby element

The content of the ruby element can include HTML comments, text content and groups of HTML tags that can be used in phrasing content, with each group followed by either a single rt element or a sequence of an rp element, an rt element and another rp element.

<ruby> Tag Attributes

Attributes of the <ruby> tag
global attributes The only attributes that can be coded on the <span> tag are the common HTML attributes.

<ruby> Tag Examples

Examples of the ruby tag in HTML 5
Example of ruby text using the HTML <rt> tag
(see <ruby> tag demo above)
<ruby>&#xff99;<rp> (</rp><rt>ru</rt><rp>) </rp>&#x30d3;<rp> (</rp><rt>bi</rt><rp>) </rp></ruby>

The space adjacent to the parenthesis inside each rp element separates the parenthesized romanji text from the katakana character when the ruby parentheses are displayed in browsers that do not support the ruby and rt elements.

Example of ruby text showing pronunciation
<style scoped="scoped">
#example2 rt {
   font-size: 60%
<ruby id="example2">ru<rt>r&#x014d;&#x014d;'</rt>by<rt>b&#x113;</rt></ruby>

In this case, the ruby parentheses are omitted because it would be preferred that the "ru" and the "by" not be separated. Unfortunately, browsers that do not support the <rt> tag are more likely to display the text inside the rt element rather than suppress it, making it all run together like this: rurōō'bybē. Adding a style with font-size: 60% mitigates this issue while not affecting WebKit browsers, since that is their default font size for ruby text.

Alternatives to the <ruby> tag
Annotate with plain old text content:
<p>日本語: ブックマーク 同期 &#160; English: Bookmark now</p>
or, using HTML character codes:
   &#12502;&#12483;&#12463;&#12510;&#12540;&#12463; &#21516;&#26399;
&#160; English: Bookmark now</p>
If it is an <a href> link, just add the title attribute:
<a href="#read-more" title="read more">続きを読む</a>
or, using HTML character codes:
<a href="#read-more" title="read more">&#32154;&#12365;&#12434;&#35501;&#12416;</a>
Add a span element with a title attribute and a style to indicate popup help is available:
<style scoped="scoped">
.has-popup {
   color: rgb(204, 51, 102);
   cursor: help;
<span class="has-popup" title="あさめしまえ">朝飯前</span>
<!-- or, using HTML character codes: -->
<span class="has-popup"

Changes in HTML 5 - <ruby> Tag

What's new in HTML 5

The <ruby> tag is one of the new elements in HTML 5.

Differences between HTML 5 and earlier versions of HTML

The <ruby> tag did not exist in older versions of HTML.

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the names of all HTML element types, which now includes the ruby element name. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.

Valid HTML 5