W3-Video WEB Tutorials

w3-video.com is a Free eLearning Website with over 500 video tutorials on HTML5, XAMPP, .htaccess, Firefox, Notepad++

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

rt ... ⁄rt

Share it

rt intro rt parents - children rt syntax

HTML5 rt element

The rt element allows you to mark up the ruby annotations of the base text marked up through ruby element. »video

About rt

Parents, children rt

Attributes rt

Syntax rt

<rt> ... </rt>
<rt> ... »video

Attributes and Values rt (comma separated)

<rtattribute="attribute_value(s)"> Video Examples
1. specific attributes
All Specific Attributes
2. global attributes
1.accesskey=keyboard key»img<rt accesskey="h"> ... </rt>
2.class=class name»html »img<rt class="class_name"> ... </rt>
3.contenteditable="",  , true, false »html<rt contenteditable="true"> ... </rt>
4.contextmenu=menu id value»html<rt contextmenu="menu_id_value"> ... </rt>
5.data-*= value -<rt data-http-error="404"> ... </rt>
6.dir=ltr, rtl, auto»html<rt dir="ltr"> ... </rt>
7.draggable= true,  , false»img<rt draggable="false"> ... </rt>
8.dropzone= copy, move, link, string:, file: -<rt dropzone="copy"> ... </rt>
9.hidden= "",  , hidden»html »img<rt hidden="hidden"> ... </rt>
10.id=id name»html »img<rt id="unique_id_name"> ... </rt>
11.itemid= URL --
12.itemprop= string »link »a-
13.itemref= string --
14.itemscope= "",  , itemscope--
15.itemtype= absolute URL --
16.lang=language code »html »head»title »img<rt lang="en"> ... </rt>
17.spellcheck="",  , true, false»html<rt spellcheck="true"> ... </rt>
18.style=CSS property:value»html »img<rt style="color:red"> ... </rt>
19.tabindex= integer »img<rt tabindex="3"> ... </rt>
20.title=text»html »link»style »abbr»dfn
»img »meter
<rt title="html page"> ... </rt>
21.translate="", yes, no»html »img<rt translate="yes"> ... </rt>
All Global Attributes
3. global event attributes
1.onclick=script» list<element onclick="script" > ...
2.ondblclick=script» list<element ondblclick="script" > ...
All Event Attributes

Video demonstration rt element

HTML5 rt element Tutorial

min video details
00:00 video tutorial: ruby, rt, rt elements
00:02 ruby element allows you to mark up a base text and provide ruby annotations for it
00:08 these are the Japanese characters for Tokyo
00:11 and for each Japanese character we can provide these ruby annotations (in hiragana, a Japanese syllabary)
00:25 adding the base text (the 2 Japanese characters) inside ruby element
00:28 and only now, for each character, we can provide the corresponding ruby annotations through rt element
00:53 each base character has associated a ruby annotation, but in case these ruby annotations are not supported in browser, we can add parentheses around them between rt start and end tags
01:33 example: this one represents a ruby annotation
01:39 example: this one represents the base character (text) and goes inside the ruby element
01:44 example: this one represents the annotation for the base character (text) and goes inside rt element

For more information about the rt element, please see the specs: W3CWHATWG