HTML <i> Tag
The <i> tag in HTML is used to display text in italics. Traditionally, it has been used to emphasize words, but its primary semantic purpose is to indicate text with an alternative voice or mood, such as a thought, a foreign word, or a technical term. It's important to note that for general emphasis, the <em> tag is often preferred for its semantic meaning, which carries more weight for screen readers and search engines.
Syntax
<i attribute="value">content</i>
Attributes
| Attribute | Value | Description |
|---|---|---|
| Global Attributes | Any | Any of the global attributes applicable to HTML elements |
Example
<p>This is a normal paragraph. <i>This text is in italics.</i></p>
More Examples
Example 1: Indicating a Thought
The <i> tag can be used to represent a character's thought.
<p>She looked at the sky and thought, <i>"Will it rain today?"</i></p>
Example 2: Foreign Words
Use <i> to indicate words from another language.
<p>The Italian word for hello is <i>ciao</i>.</p>
Example 3: Technical Terms
The tag is also suitable for defining technical terms or names of ships, etc..
<p>The scientific name for a domestic cat is <i>Felis catus</i>.</p>
<p>He served on the ship <i>HMS Victory</i>.</p>
Example 4: Combining with other text formatting tags
Although not required often but can be used in combination with other tags like bold.
<p>The movie was <i><b>absolutely</b></i> amazing.</p>
Example 5: Avoiding misuse of <i>
Use <em> for emphasis instead of <i>.
<p>It is <em>important</em> to study before the exam not just <i>important</i>.</p>
Browser Support
| Browser | Version |
|---|---|
| Chrome | 1+ |
| Edge | 12+ |
| Firefox | 1+ |
| Safari | 1+ |
| Opera | 1+ |
Notes and Tips
- The
<i>tag is a phrasal tag and can be placed within any other text container. - While
<i>renders text in italics, it does not inherently convey semantic importance. Use<em>for emphasis or<strong>for strong emphasis. - Avoid using
<i>for purely stylistic reasons. Use CSS for styling to separate presentation from content. - Use the tag consistently and semantically within your markup.
-
The
<i>tag may be used for a technical term, a thought, or to represent text from another language. It can even be used in names of ships and so on. -
Always ensure that your website or markup is following the accessibility guidlines.
