HTML5 Reference

HTML <ruby> tag

Definition

The <ruby> tag allows spans of phrasing content to be marked with ruby annotations.

Ruby annotations are short spans of text presented alongside base text that are primarily used in East Asian typography for guidance on pronunciation or inclusion of other annotations.

The <ruby> element must contain at least one or more of the following child elements <rp>, <rt> or <rtc>.

The <ruby> tag was introduced in HTML5.

Example


<ruby>
  伦 <rp>(</rp><rt>lún</rt><rp>)</rp>
  敦 <rp>(</rp><rt>dūn</rt><rp>)</rp>
  <rtc> London</rtc>
</ruby>
(lún)(dūn) London

Attributes

The following attributes can be used with the <ruby> tag.


<ruby> Specific Attributes
Attribute Value Description Example
There are no required or optional attributes specific to the <ruby> tag.
<ruby> Global Attributes
Attribute Description Example
Common
classSpecifies a classname for the element allowing you to apply the style of the predefined class to the content.

<ruby class="name">Computer code text</code>
idSpecifies a unique id for the element allowing you to apply the style of the predefined id to the content.

<ruby id="name">Computer code text</code>
styleSpecifies an inline style for the element allowing you to apply the style to the contentt.

<ruby style="color:red;">Computer code text</code>
titleSpecifies an inline style for the element allowing you to apply the style to the content.

<ruby title="Content info">Computer code text</code>
Keyboard
accesskeySpecifies a keyboard shortcut to associate with the element.

<ruby accesskey="a">Computer code text</code>
tabindexSpecifies a tab order for the element.

<ruby tabindex="1">Computer code text</code>
Language
dirSpecifies the directional flow of the content.

<!-- The text will flow from left to right -->
<ruby dir="ltr">Computer code text</code>
<!-- The text will flow from right to left -->
<ruby dir="rtl">Computer code text</code>
langSpecifies a language code for the content of the element.

<ruby lang="en">Computer code text</code>
spellcheckSpecifies an inline style for the element allowing you to apply the style to the contentt.

<!-- Valid values true and false. -->
<!-- Default inherited/browser specific. -->
<ruby spellcheck="true">Ruby annotations</ruby> 
translateSpecifies an inline style for the element allowing you to apply the style to the content.

<!-- Valid values yes and no. -->
<!-- Default yes. -->
<ruby translate="no">Ruby annotations</ruby> 
Miscellaneous
contenteditableSpecifies whether the content of the element is editable.

<!-- Valid values true and false. -->
<!-- Default inherited. -->
<ruby contenteditable="true">Ruby annotations</ruby> 
draggableSpecifies whether the element is draggable.

<!-- Valid values true and false. -->
<!-- Default browser specific. -->
<ruby draggable="true">Computer code text</code>
hiddenSpecifies whether the element is not yet, or no longer, relevant.

<!-- Valid values an empty string or hidden -->
<ruby hidden>Ruby annotations</ruby> 
<ruby hidden="hidden">Ruby annotations</ruby> 
<ruby> Event Attributes
Attribute Description Example
Document Element
oncopyThe script to be run when the user copies the content of an element.

 <!-- Executes go() function -->
<ruby oncopy="go()">Ruby annotations</ruby> 
oncutThe script to be run when the user cuts the content of an element.

 <!-- Executes go() function -->
<ruby oncut="go()">Computer code text</code>
onpasteThe script to be run when the user pastes some content into an element.

 <!-- Executes go() function -->
<ruby onpaste="go()">Computer code text</code>
Drag and Drop
ondragThe script to be run when an element is dragged.

 <!-- Executes go() function -->
<ruby ondrag="go()">Computer code text</code>
ondragendThe script to be run when an element has stopped being dragged.

 <!-- Executes go() function -->
<ruby ondragend="go()">Computer code text</code>
ondragenterThe script to be run when an element has been dragged to a valid drop target.

 <!-- Executes go() function -->
<ruby ondragenter="go()">Computer code text</code>
ondragleaveThe script to be run when an element leaves a valid drop target.

 <!-- Executes go() function -->
<ruby ondragleave="go()">Computer code text</code>
ondragoverThe script to be run when an element is being dragged over a valid drop target.

 <!-- Executes go() function -->
<ruby ondragover="go()">Computer code text</code>
ondragstartThe script to be run at the start of a drag operation.

 <!-- Executes go() function -->
<ruby ondragstart="go()">Computer code text</code>
ondropThe script to be run when a dragged element is being dropped.

 <!-- Executes go() function -->
<ruby ondrop="go()">Computer code text</code>
Form
onblurThe script to be run when the element loses focus.

 <!-- Executes go() function -->
<ruby onblur="go()">Computer code text</code>
onchangeThe script to be run when object changed and attempt to leave field.

 <!-- Executes go() function -->
<ruby onchange="go()">Computer code text</code>
oncontextmenuThe script to be run when a context menu is triggered.

 <!-- Executes go() function -->
<ruby oncontextmenu="go()">Computer code text</code>
onfocusThe script to be run when the element gets focus.

 <!-- Executes go() function -->
<ruby onfocus="go()">Computer code text</code>
oninputThe script to be run when an element gets user input.

 <!-- Executes go() function -->
<ruby oninput="go()">Computer code text</code>
oninvalidThe script to be run when an element is invalid.

 <!-- Executes go() function -->
<ruby oninvalid="go()">Computer code text</code>
onresetThe script to be run when a dragged element is being dropped.

 <!-- Executes go() function -->
<ruby onreset="go()">Computer code text</code>
onselectThe script to be run when some or all of the contents of an object are selected.

 <!-- Executes go() function -->
<ruby onselect="go()">Computer code text</code>
onsubmitThe script to be run when a form is submitted.

 <!-- Executes go() function -->
<ruby onsubmit="go()">Computer code text</code>
Keyboard
onkeydownThe script to be run when an element is in focus and keyboard key is pressed down.

 <!-- Executes go() function -->
<ruby onkeydown="go()">Computer code text</code>
onkeypressThe script to be run when an element is in focus and keyboard key is pressed down and released.

 <!-- Executes go() function -->
<ruby onkeypress="go()">Computer code text</code>
onkeyupThe script to be run when an element is in focus and keyboard key is released.

 <!-- Executes go() function -->
<ruby onkeyup="go()">Computer code text</code>
Media
onabortThe script code to be run on abort.

 <!-- Executes go() function -->
<ruby onabort="go()">Computer code text</code>
oncanplayThe script to be run when a file has buffered enough so it is ready to start playing.

 <!-- Executes go() function -->
<ruby oncanplay="go()">Computer code text</code>
oncanplaythroughThe script to be run when a file can be played all the way to the end without further need of buffering.

 <!-- Executes go() function -->
<ruby oncanplaythrough="go()">Computer code text</code>
oncuechangeThe script to be run when the cue changes when using the track element.

 <!-- Executes go() function -->
<ruby oncuechange="go()">Computer code text</code>
ondurationchangeThe script to be run when the length of the media is changed.

 <!-- Executes go() function -->
<ruby ondurationchange="go()">Computer code text</code>
onemptiedThe script to be run when a media resource element suddenly becomes empty, usually due to an error.

 <!-- Executes go() function -->
<ruby onemptied="go()">Computer code text</code>
onendedThe script to be run when the media has reach the end.

 <!-- Executes go() function -->
<ruby onended="go()">Computer code text</code>
onloadeddataThe script to be run when media data is loaded and playback can start.

 <!-- Executes go() function -->
<ruby onloadeddata="go()">Computer code text</code>
onloadedmetadataThe script to be run when metadata has been loaded.

 <!-- Executes go() function -->
<ruby onloadedmetadata="go()">Computer code text</code>
onloadstartThe script to be run whenthe media resource has started loading.

 <!-- Executes go() function -->
<ruby onloadstart="go()">Computer code text</code>
onpauseThe script to be run when the media resource has been paused.

 <!-- Executes go() function -->
<ruby onpause="go()">Computer code text</code>
onplayThe script to be run when the media resource starts playback.

 <!-- Executes go() function -->
<ruby onplay="go()">Computer code text</code>
onplayingThe script to be run when when playback has already begun.

 <!-- Executes go() function -->
<ruby onplaying="go()">Computer code text</code>
onprogressThe script to be run when the browser is fetching the media data.

 <!-- Executes go() function -->
<ruby onprogress="go()">Computer code text</code>
onratechangeThe script to be run when the playback rate changes.

 <!-- Executes go() function -->
<ruby onratechange="go()">Computer code text</code>
onseekedThe script to be run when the seeking attribute is set to false indicating that seeking has finished.

 <!-- Executes go() function -->
<ruby onseeked="go()">Computer code text</code>
onseekingThe script to be run when the seeking attribute is set to true indicating that seeking is currently active.

 <!-- Executes go() function -->
<ruby onseeking="go()">Computer code text</code>
onstalledThe script to be run when the browser is unable to continue fetching media data.

 <!-- Executes go() function -->
<ruby onstalled="go()">Computer code text</code>
onsuspendThe script to be run when media data has stopped before being completely loaded.

 <!-- Executes go() function -->
<ruby onsuspend="go()">Computer code text</code>
ontimeupdateThe script to be run when the media resources current playback position has changed.

 <!-- Executes go() function -->
<ruby ontimeupdate="go()">Computer code text</code>
onvolumechangeThe script to be run when the volume has changed or been muted.

 <!-- Executes go() function -->
<ruby onvolumechange="go()">Computer code text</code>
onwaitingThe script to be run when the media resource has paused but is expected to resume.

 <!-- Executes go() function -->
<ruby onwaiting="go()">Computer code text</code>
Mouse
onclickThe script to be run when when a mouse is clicked on an element.

 <!-- Executes go() function -->
<ruby onclick="go()">Computer code text</code>
ondblclickThe script to be run when a mouse is double clicked on an element.

 <!-- Executes go() function -->
<ruby ondblclick="go()">Computer code text</code>
onmousedownThe script to be run when he mouse button is pressed down while the cursor is over an element.

 <!-- Executes go() function -->
<ruby onmousedown="go()">Computer code text</code>
onmousemoveThe script to be run when the mouse button is moved.

 <!-- Executes go() function -->
<ruby onmousemove="go()">Computer code text</code>
onmouseoutThe script to be run when the mouse cursor moves off an element.

 <!-- Executes go() function -->
<ruby onmouseout="go()">Computer code text</code>>
onmouseoverThe script to be run when the mouse cursor moves over an element.

 <!-- Executes go() function -->
<ruby onmouseover="go()">Computer code text</code>
onmouseupThe script to be run when the mouse button is released while the cursor is over the element.

 <!-- Executes go() function -->
<ruby onmouseup="go()">Computer code text</code>
onwheelThe script to be run when the mouse wheel rolls up or down over an element.

 <!-- Executes go() function -->
<ruby onwheel="go()">Computer code text</code>
Scroll
onscrollThe script code to be run when the scrollbar of an element is being scrolled.

 <!-- Executes go() function -->
<ruby onscroll="go()">Ruby annotations</ruby> 
Window - NONE

Relevant HTML Tutorials

HTML Lessons - Language