HTML <ruby> Tag

The <ruby> tag displays a ruby annotation which indicates the pronunciation or meaning of the text. The annotation appears in very small font above the text. This tag is mostly used in East Asian publications.

HTML Tag

Example

#

A <ruby> element. The Japanese text 'はい' has it pronunciation (Hai) in very small font above the text.

はい (Hai)
<ruby>
  はい
  <rp>(</rp><rt>Hai</rt><rp>)</rp>
</ruby>

Using <ruby>

The <ruby> tag is used to display ruby annotations.

Ruby annotations are rendered in very small text which indicates the pronunciation or meaning.

This element is placed above, below, or next to the base text it is associated with.

The <ruby> tag works with these two tags:

  • <rt> - provides the pronunciation or further explanation to the text
  • <rp> - displays text when the <ruby> tag is not supported by the browser.

Phrase tags

Phrase tags highlight the meaning of a small piece of text (i.e. a phrase). The <ruby> tag is one of them, but there several others.

A list of all HTML Phrase tags.

Tag Description
<em> Indicates emphasized text
<strong> Indicates important text
<code> Indicates computer code
<samp> Indicates sample output from a computer program
<ruby> Indicates a ruby annotation (used to display text pronunciation or meaning)
<var> Indicates a variable

Did you know?

Did you know?

Why is it called <ruby>

The tag <ruby> is used to specify ruby annotations.

The word ruby came from a unit of measurement used by typesetters.

It represents the smallest text size which can be printed on newsprint while still being readable.

This annotation is most commonly used in Japanese publications.


Text Tags

The <ruby> tag is part of a group of tags that are used to create and format text documents. This group is referred to as the Text tag group. Together, these tags allow you to create comprehensive HTML text documents.

Here is a list of text tags.

Element Description
<h1>-<h6> Defines text headings in 6 different sizes
<p> Creates a paragraph
<span> Container for one or more inline text elements
<br> Creates a line break
<sup> Specifies superscript text
<sub> Specifies subscripted text
<u> Specifies underlined text
<i> Specifies italic text
<b> Specifies bold text
<em> Marks text that needs emphasis
<strong> Indicates text that is important or with high urgency
<del> Defines deleted text
<ins> Defines inserted text
<kbd> Specifies keyboard input, such as, CTRL or ALT
<ruby> Represents a small annotation with pronunciation of text
<wbr> Specifies a preferred word-break location for long words

Browser support

Here is when <ruby> support started for each browser:

Chrome
5.0 May 2010
Firefox
38.0 May 2015
IE/Edge
5.5 Jul 2000
Opera
15.0 May 2013
Safari
5.0 Jun 2010

You may also like

Guides