HTML 5 <rb> Tag

The HTML <rb> tag marks the base text component of a ruby annotation. Ruby annotations are often used in East Asian typography.

When no <rb> tag is used, the base is implied. However, you can also make it explicit. This is where the <rb> tag is used. This makes the tag ideal for styling, or when consecutive bases are to be treated as a group. In other words

<ruby><rb>base<rt>annotation</ruby>

<ruby>base<rt>annotation</ruby>

Ruby (also spelt rubi) characters are small, annotative glosses that can be placed above or to the right of a Chinese character when writing logographic languages such as Chinese or Japanese to show the pronunciation. Ruby annotations, are usually used as a pronunciation guide for relatively obscure characters.

The <rb> tag was introduced in HTML 5 (W3C) but as of this writing it is not supported by the WHATWG HTML Living Standard.

Example

This example demonstrates how to write the <rb> element into your ruby annotations.

This example is based on the W3C example. Tokyo is written with two kanji characters, 東, which is pronounced とう, and 京, which is pronounced きょう. Each base character should be annotated individually, but the fallback should be 東京(とうきょう) not 東(とう)京(きょう). The code below shows how this can be marked up.

Try it

Attributes

HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign, with the value surrounded by double quotes. Here's an example, style="color:black;".

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The attributes that you can add to this tag are listed below.

Element-Specific Attributes

The following table shows the attributes that are specific to this tag/element.

Global Attributes

The following attributes are standard across all HTML 5 tags (although the tabindex attribute does not apply to dialog elements).

• accesskey
• autocapitalize
• class
• contenteditable
• data-*
• dir
• draggable
• hidden
• id
• inputmode
• is
• itemid
• itemprop
• itemref
• itemscope
• itemtype
• lang
• part
• slot
• spellcheck
• style
• tabindex
• title
• translate

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.

• onabort
• onauxclick
• onblur
• oncancel
• oncanplay
• oncanplaythrough
• onchange
• onclick
• onclose
• oncontextmenu
• oncopy
• oncuechange
• oncut
• ondblclick
• ondrag
• ondragend
• ondragenter
• ondragexit
• ondragleave
• ondragover
• ondragstart
• ondrop
• ondurationchange
• onemptied
• onended
• onerror
• onfocus
• onformdata
• oninput
• oninvalid
• onkeydown
• onkeypress
• onkeyup
• onlanguagechange
• onload
• onloadeddata
• onloadedmetadata
• onloadstart
• onmousedown
• onmouseenter
• onmouseleave
• onmousemove
• onmouseout
• onmouseover
• onmouseup
• onpaste
• onpause
• onplay
• onplaying
• onprogress
• onratechange
• onreset
• onresize
• onscroll
• onsecuritypolicyviolation
• onseeked
• onseeking
• onselect
• onslotchange
• onstalled
• onsubmit
• onsuspend
• ontimeupdate
• ontoggle
• onvolumechange
• onwaiting
• onwheel

For a full list of event handlers, see HTML 5 event handler content attributes.