HTML5 Reference

HTML <i> tag

Definition

The <i> tag is used to define a change of mood or alternate voice in text and can also be used for technical terms, phrases from other language or thoughts and meanderings.

The <i> tag should not be used for italics from HTML5 onwards as was the case in earlier versions of HTML, even though it will generally be rendered in italics in browsers

Use css attributes such as the CSS font-style property for styling text.

Use the <em> tag for emphasizing text.

Use the <strong> tag to add importance to text.

Example


<p>The best known magic word is <i>abracadabra</i> and is used by magicians of all ages.</p>

The best known magic word is abracadabra and is used by magicians of all ages.

Required Attributes

NONE

Optional Attributes

NONE

Attributes

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


<i> Specific Attributes
Attribute Value Description Example
There are no required or optional attributes specific to the <i> tag.
<i> 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.

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

<i id="name">Some text here</i>
styleSpecifies an inline style for the element allowing you to apply the style to the contentt.

<i style="color:red;">Some text here</i>
titleSpecifies an inline style for the element allowing you to apply the style to the content.

<i title="Content info">Some text here</i>
Keyboard
accesskeySpecifies a keyboard shortcut to associate with the element.

<i accesskey="a">Some text here</i>
tabindexSpecifies a tab order for the element.

<i tabindex="1">Some text here</i>
Language
dirSpecifies the directional flow of the content.

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

<i lang="en">Some text here</i>
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. -->
<i spellcheck="true">Some text here</i> 
translateSpecifies an inline style for the element allowing you to apply the style to the content.

<!-- Valid values yes and no. -->
<!-- Default yes. -->
<i translate="no">Some text here</i> 
Miscellaneous
contenteditableSpecifies whether the content of the element is editable.

<!-- Valid values true and false. -->
<!-- Default inherited. -->
<i contenteditable="true">Some text here</i> 
draggableSpecifies whether the element is draggable.

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

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

 <!-- Executes go() function -->
<i oncopy="go()">Some text here</i> 
oncutThe script to be run when the user cuts the content of an element.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 <!-- Executes go() function -->
<i oncanplay="go()">Some text here</i>
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 -->
<i oncanplaythrough="go()">Some text here</i>
oncuechangeThe script to be run when the cue changes when using the track element.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 <!-- Executes go() function -->
<i onscroll="go()">Some text here</i> 
Window - NONE

Relevant HTML Tutorials

HTML Lessons - Inline Semantics