<i>

  • Revision slug: HTML/Element/i
  • Revision title: i
  • Revision id: 232673
  • Created:
  • Creator: grendel
  • Is current revision? No
  • Comment Added new compatibility table.; 73 words added

Revision Content

Summary

The HTML Offset Text (or Italics) Element (<i>) represents a range of text that is set off from the normal text for some reason, for example, technical terms, foreign language phrases, or fictional character thoughts. It is typically displayed in italic type.

Usage context

Permitted content Phrasing content.
Tag omission None, must have both a start tag and an end tag.
Permitted parent elements Any element that accepts phrasing content.
Normative document HTML 5, section 4.6.15HTML 4.01, section 15.2.1

 

Attributes

Like all HTML elements, this element supports the global attributes.

Example

<p>This is the first sentence. <i>This whole sentence is in an italicized font.</i></p>

Result

This is the first sentence. This whole sentence is in an italicized font.

Notes

Use this element only when there is not a more appropriate semantic element. For example:

  • Use {{ HTMLElement("em") }} to indicate stress emphasis.
  • Use {{ HTMLElement("strong") }} to indicate importance.
  • Use {{ HTMLElement("mark") }} to indicate relevance.
  • Use {{ HTMLElement("cite") }} to mark the name of a work, such as a book, play or song.
  • Use {{ HTMLElement("dfn") }} to mark the defining instance of a term.

It is a good idea to use the class attribute to identify why the element is being used, so that if the presentation needs to change at a later date, it can be done selectively with style sheets.

DOM Interface

This element implements the HTMLElement interface.

Implementation note: up to Gecko 1.9.2 inclusive, Firefox implements the HTMLSpanElement interface for this element.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}

{{ HTML:Element_Navigation() }}

{{ languages( { "pl": "pl/HTML/Element/i" } ) }}

Revision Source

<h2>Summary</h2>
<p>The HTML Offset Text (or Italics) Element (<span style="font-family: Courier New;">&lt;i&gt;</span>) represents a range of text that is set off from the normal text for some reason, for example, technical terms, foreign language phrases, or fictional character thoughts. It is typically displayed in italic type.</p>
<h2>Usage context</h2>
<table class="standard-table"> <tbody> <tr> <td>Permitted content</td> <td><a href="/en/HTML/Content_categories#Phrasing_content" title="en/HTML/Content categories#Phrasing content">Phrasing content</a>.</td> </tr> <tr> <td>Tag omission</td> <td>None, must have both a start tag and an end tag.</td> </tr> <tr> <td>Permitted parent elements</td> <td>Any element that accepts <a href="/en/HTML/Content_categories#Phrasing_content" title="en/HTML/Content categories#Phrasing content">phrasing content</a>.</td> </tr> <tr> <td>Normative document</td> <td><a class=" external" href="http://www.w3.org/TR/html5/text-level-semantics.html#the-i-element" title="http://www.w3.org/TR/html5/text-level-semantics.html#the-i-element">HTML 5, section 4.6.15</a>;  <a class=" external" href="http://www.w3.org/TR/html401/present/graphics.html#h-15.2.1" title="http://www.w3.org/TR/html401/present/graphics.html#h-15.2.1">HTML 4.01, section 15.2.1</a></td> </tr> </tbody>
</table>
<p> </p>
<h2>Attributes</h2>
<p>Like all HTML elements, this element supports the <a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">global attributes</a>.</p>
<h2>Example</h2>
<pre class="brush: html">&lt;p&gt;This is the first sentence. &lt;i&gt;This whole sentence is in an italicized font.&lt;/i&gt;&lt;/p&gt;
</pre>
<h4 name="Result">Result</h4>
<p>This is the first sentence. <em>This whole sentence is in an italicized font.</em></p>
<h2>Notes</h2>
<p>Use this element only when there is not a more appropriate semantic element. For example:</p>
<ul> <li>Use {{ HTMLElement("em") }} to indicate stress emphasis.</li> <li>Use {{ HTMLElement("strong") }} to indicate importance.</li> <li>Use {{ HTMLElement("mark") }} to indicate relevance.</li> <li>Use {{ HTMLElement("cite") }} to mark the name of a work, such as a book, play or song.</li> <li>Use {{ HTMLElement("dfn") }} to mark the defining instance of a term.</li>
</ul>
<p>It is a good idea to use the <strong>class</strong> attribute to identify why the element is being used, so that if the presentation needs to change at a later date, it can be done selectively with style sheets.</p>
<h2>DOM Interface</h2>
<p>This element implements the <code><a href="/en/DOM/element" title="en/DOM/element">HTMLElement</a></code> interface.</p>
<div class="note">
<p><strong>Implementation note: </strong>up to Gecko 1.9.2 inclusive, Firefox implements the <a href="/en/DOM/span" title="en/DOM/span"><span style="font-family: Courier New;">HTMLSpanElement</span></a> interface for this element.</p>
</div>
<h2 name="Browser_Compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>Basic support</td> <td>1.0</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatVersionUnknown() }}</td> </tr> </tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatVersionUnknown() }}</td> </tr> </tbody>
</table>
</div>
<p>{{ HTML:Element_Navigation() }}</p>
<p>{{ languages( { "pl": "pl/HTML/Element/i" } ) }}</p>
Revert to this revision