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++

i ... ⁄i

Share it

i intro i browser display i parents - children i syntax

HTML5 i element

The i element allows you to mark up a different quality text (text in a different voice or mood): e.g. a technical term, a thought, phrase(s) from another language, names⁄terms from different times. »video

About i

Display & support i

Firefox iconChrome iconIE iconOpera iconSafari icon

Parents, children i

Attributes i

Syntax i

1<i> ... <⁄i> »video

Attributes and Values i (comma separated)

<iattribute="attribute_value(s)"> Video Examples
1. specific attributes
All Specific Attributes
2. global attributes
1.accesskey=keyboard key»img<i accesskey="h"> ... </i>
2.class=class name»html »img<i class="class_name"> ... </i>
3.contenteditable="",  , true, false »html<i contenteditable="true"> ... </i>
4.contextmenu=menu id value»html<i contextmenu="menu_id_value"> ... </i>
5.data-*= value -<i data-http-error="404"> ... </i>
6.dir=ltr, rtl, auto»html<i dir="ltr"> ... </i>
7.draggable= true,  , false»img<i draggable="false"> ... </i>
8.dropzone= copy, move, link, string:, file: -<i dropzone="copy"> ... </i>
9.hidden= "",  , hidden»html »img<i hidden="hidden"> ... </i>
10.id=id name»html »img<i id="unique_id_name"> ... </i>
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<i lang="en"> ... </i>
17.spellcheck="",  , true, false»html<i spellcheck="true"> ... </i>
18.style=CSS property:value»html »img<i style="color:red"> ... </i>
19.tabindex= integer »img<i tabindex="3"> ... </i>
20.title=text»html »link»style »abbr»dfn
»img »meter
<i title="html page"> ... </i>
21.translate="", yes, no»html »img<i translate="yes"> ... </i>
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 i element

HTML5 i element: mark up offset text

min video details
00:00 video tutorial: i element
00:05 i element allows you to mark a text of a different quality like:
- text in a different voice
- or mood
- or a thought
- a technical term
- or phrase(s) from another language
00:13 in this paragraph, we can consider the quality of this text
00:16 as being different from this one,
00:18 since this part of text represents a thought
00:27 thus, this part of text will be marked accordingly, using i element
00:34 displays in Italic in browser

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