The i tag in HTML

What does the i tag do in HTML?

The i element is used to mark words in the surrounding text, highlighting text in italics. The i tag is essentially a typographic element and is embedded (not blocky). This means that it should be used to mark up multiple words or phrases.

The i element is used to mark words in the surrounding text, <i>highlighting text</i> in italics.
example how to use element i in code

i or em?

The i element highlights text in italics. The em element points to text that is italicized. So what’s the difference? The em element emphasizes the text, and the i element indicates that the text should just be italicized. So, when should you use one and when should you use the other? There are rules for highlighting text: if you want to emphasize part of the text, you should use the em element; if italics depends only on style (Latin typographical abbreviation), you should use the i element.

The element i <i>highlights text</i> italics. <p>The element em <em>points to text</em>, that is italicized.</p>
the difference in usage of tags i and em

And don’t forget dfn

The dfn definition element, which is used to mark up a word or phrase in text, also italicizes text by default. However, the rules for using this element instead of i are much simpler. It should only be used when marking up a definable word.

The dfn definition element, which is used to mark up <dfn>word or phrase</dfn> in the text.
tag dfn usage area

Long-form italics

Sometimes it is desirable to italicize several lines of text. This can be a brief introduction to the content, a note to the reader, a “fine print” of one kind or another. The i element should be avoided here as well. If you want to italicize an entire paragraph, assign it a specific class or id and use CSS.

<p class="text">Sometimes it is desirable to italicize several lines of text. This can be a brief introduction to the content, a note to the reader, a "fine print" of one kind or another.</p>
<p class="text">1 You should also avoid the element i here. If you want to italicize an entire paragraph, assign it a specific class or id and use CSS.</p>
p {
  font-style: italic;
}
using class for italics in CSS

Leave a Comment

Your email address will not be published. Required fields are marked *