HTML <ruby> Tag
HTML
The <ruby> tag specifies the ruby annotation to help readers for pronunciation.
HTML <ruby> Tag
➔ The <ruby> element represents small annotations that are rendered above, below, or next to main text, usually used to show the pronunciation of the text.
➔ The <rt> describe the explanation of main text.
➔ The <rp> optional tag specifies the information if browsers do not support ruby annotations.
➔ It is used to display annotations (typically pronunciation guides) above or below a main text.
➔ The <ruby> element works with <rt> (ruby text) to provide annotations and optional <rp> (ruby parenthesis) fallbacks in non-supporting browsers.
➔ For browsers that do not support Ruby display, it is recommended to include the <rp> element, which wraps the annotation within brackets.
Supported Global attributes
Global attributes may be applied on all elements, although some elements may have no effect on them.
<accesskey>,
<class>,
<contenteditable>,
<contextmenu>,
<data-*>,
<dir>,
<draggable>,
<dropzone>,
<hidden>,
<id>,
<lang>,
<spellcheck>,
<style>,
<tabindex>,
<title>,
<translate>.
Supported Global Event Handler Attributes
Global Event Handler attributes may be applied on all elements, although some elements may have no effect on them.
<onabort>,
<onautocomplete>,
<onautocompleteerror>,
<onblur>,
<oncancel>,
<oncanplay>,
<oncanplaythrough>,
<onchange>,
<onclick>,
<onclose>,
<oncontextmenu>,
<oncuechange>,
<ondblclick>,
<ondrag>,
<ondragend>,
<ondragenter>,
<ondragleave>,
<ondragover>,
<ondragstart>,
<ondrop>,
<ondurationchange>,
<onemptied>,
<onended>,
<onerror>,
<onfocus>,
<oninput>,
<oninvalid>,
<onkeydown>,
<onkeypress>,
<onkeyup>,
<onload>,
<onloadeddata>,
<onloadedmetadata>,
<onloadstart>,
<onmousedown>,
<onmouseenter>,
<onmouseleave>,
<onmousemove>,
<onmouseout>,
<onmouseover>,
<onmouseup>,
<onmousewheel>,
<onpause>,
<onplay>,
<onplaying>,
<onprogress>,
<onratechange>,
<onreset>,
<onresize>,
<onscroll>,
<onseeked>,
<onseeking>,
<onselect>,
<onshow>,
<onsort>,
<onstalled>,
<onsubmit>,
<onsuspend>,
<ontimeupdate>,
<ontoggle>,
<onvolumechange>,
<onwaiting>.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example (Japanese)
<!DOCTYPE html>
<html>
<head>
<title>HTML ruby Tag Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
</head>
<body>
<h3>HTML ruby Tag Example</h3>
<p>A ruby annotation for Japanese words</p>
<ruby>
<rb>漢</rb>
<rp>(</rp>
<rt>kan</rt>
<rp>)</rp>
<rb>字</rb>
<rp>(</rp>
<rt>ji</rt>
<rp>)</rp>
</ruby>
<p>A ruby annotation for a Japanese word</p>
<ruby>
はい
<rp>(</rp>
<rt>Hai</rt>
<rp>)</rp>
</ruby>
</body>
</html>
Click on the "Try it Now" button to see how it works.
Example (Chinese)
<!DOCTYPE html>
<html>
<head>
<title>HTML ruby Tag Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
</head>
<body>
<h3>HTML ruby Tag Example</h3>
<p>A ruby annotation for Chinese words</p>
<ruby>
<rb>我</rb>
<rp>(</rp>
<rt>wǒ</rt>
<rp>)</rp>
<rb>喜欢</rb>
<rp>(</rp>
<rt>xǐ huān</rt>
<rp>)</rp>
<rb>写</rb>
<rp>(</rp>
<rt>xiě</rt>
<rp>)</rp>
<rb>程序</rb>
<rp>(</rp>
<rt>chéng xù</rt>
<rp>)</rp>
</ruby>
<p>A ruby annotation for Chinese words</p>
<ruby>
漢
<rp>(</rp>
<rt>hàn</rt>
<rp>)</rp>
字
<rp>(</rp>
<rt>zì</rt>
<rp>)</rp>
</ruby>
</body>
Click on the "Try it Now" button to see how it works.