HTML <rt> 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 <rt> Tag in HTML 5

The <rt> tag is used to provide supplemental text for the base text inside a ruby element. 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 <rt> 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 ruby text will be displayed with the <rp> ruby parenthesis like this:

ruby parentheses

<rt> Tag Syntax

Rules for coding HTML rt elements
<body>
   ...
   ... phrasing content expected ...
   <ruby>... phrasing content ...
      <rp> (</rp><rt>... phrasing content ...</rt><rp>) </rp>
      ...
   </ruby>
   ...
</body>
Rules for coding HTML rt 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. Inside a ruby element, code an rt element following the phrasing content for the base text that is to be annotated.
  2. Optionally include an rp element for the opening ruby parenthesis before the rt element.
  3. Begin the rt element with a starting <rt> 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.
  4. Include any HTML global attributes on the <rt> tag as appropriate.
  5. Inside the rt element, between the starting <rt> tag and the ending </rt> tag, code the inner HTML phrasing content with the text for the annotation of the base text.
  6. End the rt element with a matching </rt> closing tag.
  7. If an rp element was coded before the rt element, code another rp element for the closing ruby parenthesis after the ending </rt> tag.
Content Model
Content of the rt element

The content of the rt element can include HTML comments, text content and only those HTML tags that can be used in phrasing content.


<rt> Tag Attributes

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

<rt> Tag Examples

Examples of the rt tag in HTML 5
Example of ruby text using the HTML <rt> tag
(see <rt> 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 rt and ruby elements.

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

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.


Changes in HTML 5 - <rt> Tag

What's new in HTML 5

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

Differences between HTML 5 and earlier versions of HTML

The <rt> 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 rt element name. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.


Valid HTML 5