HTML Italic Span

  2. HowTo
  3. HTML Howtos
  4. HTML Italic Span
Zeeshan Afridi Feb 19, 2023
HTML HTML Italic
  1. Use <i> Tag to Italicize Text in HTML
  2. Use <em> Tag to Italicize Text in HTML
  3. Use <span> Tag to Italicize Text in HTML
  4. Conclusion
HTML Italic Span

There are multiple tags used in HTML to display the text in italic. These tags highlight a keyword, technical term, phrase, or important word in a different language.

Italic tags are primarily intended for users and help them emphasize the piece of text, like quotes.

The users pay special attention to the contents marked with these tags. So there could be different tags used to italicize the text, but in this article, the following tags are used to italicize text in HMTL.

  1. The <i> tag
  2. The <em> tag
  3. The <span> tag

Use <i> Tag to Italicize Text in HTML

In HTML, the tag <i> helps us make the text italic and defines a part of the text in an alternate mood. The <i> tag is a container tag containing opening and closing tags.

The contents inside the <i> tag are typically displayed in italic form.

Syntax:

<i>Contents</i>

Code example:

<p><i>Lorem ipsum</i> is the most popular filler text in history.</p>

Use <em> Tag to Italicize Text in HTML

The <em> tag is also used to italicize text. A reader will pronounce the content inside the <em> tag with an emphasis using verbal stress.

This container tag has an opening and closing tag, and the text inside the <em> tag is displayed in italic form.

Syntax:

<em>Italic Text</em>

Code example:

<p>You <em>have</em> to hurry up!</p>

Use <span> Tag to Italicize Text in HTML

The html <span> tag is a generic inline container used to group inline elements for styling purposes. This tag helps to make a particular text or any other content different from the rest.

The <span> is a paired tag having open < and closing > tags, and closing the tag is mandatory. <span> tag is similar to <div> but <div> is a block-level tag, and span is an inline tag.

Syntax:

<span style="font-style:italic">contents</span>

Code example:

<p>The bird is <span style="font-style:italic">flying</span> in the sky.</p>

Let’s see an example of using all these properties in a single example.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML: The i and em span tags</title>
    </head>
    <body>
        <h3>From the Universal Declaration of Human Rights</h3>

        <p>
            Where recognition of the inherent dignity and of the <i>equal and inalienable rights</i> of <em>all members of the human family</em> is the <span style="font-style: italic;">foundation of freedom, justice and peace</span> in the
            world
        </p>
    </body>
</html>

Conclusion

To summarize the article on how to italicize text in HTML, we have discussed what italics are and how we can italicize a text.

Furthermore, we discussed the different tags used to italicize text. The different tags we discussed in this article are <i>, <em>, and <span>.

Author: Zeeshan Afridi
Zeeshan Afridi avatar Zeeshan Afridi avatar

Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.

LinkedIn