HTML <ruby> Tag
The <ruby> tag defines phonetic tips in Japan and East Asian languages. Tag description, attributes and examples of using.
The HTML <ruby> tag defines a ruby annotation — a small run of text rendered alongside (usually above) some base text to show its pronunciation or meaning. Ruby annotations are most common in East Asian typography: for example, displaying the phonetic reading of a Chinese or Japanese character so a reader who doesn't know the character can still pronounce it.
The <ruby> tag is one of the HTML5 elements.
How <ruby>, <rt>, and <rp> work together
A ruby annotation is built from a small group of elements that act as a single unit:
<ruby>is the container. The base text (the characters being annotated) goes directly inside it.<rt>(ruby text) holds the annotation — the reading or note shown over the base text.<rp>(ruby parenthesis) is an optional fallback. Modern browsers hide its content, but browsers that don't support ruby show it instead, wrapping the annotation in parentheses so the page still reads sensibly.
So a complete annotation looks like this:
<ruby>base<rp>(</rp><rt>reading</rt><rp>)</rp></ruby>A supporting browser renders reading stacked above base. A non-supporting browser falls back to the inline form base(reading), which is why the <rp> parentheses matter — without them the annotation would jam right up against the base text as basereading.
Note: You may see older examples that wrap the base text in an
<rb>(ruby base) element.<rb>is obsolete — modern HTML puts the base text directly inside<ruby>with no wrapper. Don't add it to new markup.
Syntax
The <ruby> tag comes in pairs. The base text and its <rt>/<rp> annotations are written between the opening (<ruby>) and closing (</ruby>) tags.
Example: Japanese furigana
In Japanese, furigana are small hiragana characters printed above kanji to show how the kanji is read. The <ruby> element is the standard way to mark up furigana on the web. Here the kanji 明日 (meaning "tomorrow") is annotated with its reading Ashita:
HTML <ruby> Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ruby>
明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp>
</ruby>
</body>
</html>Result
Annotating each character separately
You can put several base-character/<rt> pairs inside one <ruby> element. Each base character is then annotated with its own reading, and the readings line up over the correct characters:
<ruby>
漢 <rt>kan</rt>
字 <rt>ji</rt>
</ruby>This is useful when a multi-character word reads differently per character. The same structure works for Chinese pinyin (Latin-letter pronunciation, e.g. 北京 with Běi / jīng) and for bopomofo / zhuyin, where the phonetic symbols are placed beside the base characters.
Styling ruby with CSS
The <ruby> tag supports the Global Attributes and the Event Attributes. It has no element-specific attributes — appearance is controlled with CSS.
You can color the base and annotation text independently by targeting the ruby and rt selectors:
ruby {
color: blue;
}
rt {
color: red;
}Two CSS properties are specific to ruby layout:
ruby-positioncontrols where the annotation sits relative to the base text. Common values areover(above the base — the default for most scripts),under(below it, sometimes used for bopomofo or to keep the line height tidy), andalternate.ruby-aligncontrols how the annotation and base text are distributed when they differ in length, for examplestart,center, orspace-between.
ruby {
ruby-position: under;
ruby-align: center;
}Browser support: The
<ruby>,<rt>, and<rp>elements are well supported across all modern browsers. Theruby-positionproperty is also widely supported, whileruby-alignhas more limited support — test it before relying on it, and keep the<rp>fallback so the meaning survives even where ruby styling is incomplete.