How to Make HTML Italics

by

It is common to make text italics while typing documents; there are a few ways you can also do this in HTML. You can either make HTML italics using a number of default HTML tags or styling the piece of text using CSS.

Make HTML Italics Using The <i> Tag

The first way you can make HTML italics is with the <i> tag; this tag defines part of a text in an alternate mood or voice by displaying the portion of text in italic. Before using the <i> tag, ensure that there is no other tag more fitting to what you’re trying to achieve; the cases you should use the <i> tag are:

  • Technical terms
  • Alternative voice or mood
  • Transliterations from a different language
  • Unspoken thoughts in a piece of writing
  • Ship or vessel names in Western writing systems

Both the starting <i> and closing </i> tags are necessary. The <i> tag is an inline tag; therefore, it can be used within other tags without breaking the visual structure of the document:

<p>We sailed on the ship called <i>Star of the Sea</i></p>

The <i> tag can also be used on heading elements:

<h1><i>Italics</i> Can Be Used On Headings</h1>

Make HTML Italics Using The <em> Tag

You can also italicize a word in HTML using the <em> tag; the em stands for emphasis because this tag denotes emphatic stress in a piece of text. The em tag is an inline tag, and it requires the opening and closing tags to denote where the emphasis begins and ends. 

The <em> tag should not stand on its own; instead, it should be nested within a paragraph tag.

Here’s how to use the <em> tag:

<p>Get out of the room <em>now</em>!</p>

Make HTML Italics Using The <cite> Tag

Another means of italicizing words on HTML is through the <cite> tag; it refers to or cites the creative works of another artist or author. The opening <cite> and closing </cite> should contain the work’s title, while the author/artist’s name is outside the tag.

An example of how to use the <cite> tag is as follows:

<p><cite>Harry Potter & The Philosopher’s Stone</cite> by J. K. Rowling.</p>

Make HTML Italics Using The <dfn> Tag

Words can be italicized in HTML using the <dfn> tag; the <dfn> tag stands for the definition; it specifies a word whose definition will be provided. The opening <dfn> and closing </dfn> tags are compulsory, and the word’s definition is to be placed after the closing tag.

An example of how to use the tag is as follows:

<p><dfn>HTML</dfn> is the markup language on which websites are built.</p>

Difference Between Each HTML Italic Tag

You might observe that all the above HTML tags give the same front-end result; however, there is a difference between each of the tags above. In HTML5 (the current HTML version), when many tags do a similar thing, it’s essential to know the semantic use of each.

The <i> tag identifies text that is different from the normal flow of the prose, such as a fictional character, a foreign word, or a character’s thoughts.

The <em> tag identifies words that the reader should speak with more stress, such as an exclamation.

The <cite> tag cites another author or artist’s work.

The <dfn> tag specifies a word about to be defined.

The distinction between each of the uses is especially for accessibility purposes; for instance, screen-readers and narrators will be able to know what each use of the italics means. A screen reader that sees an <em> italic will stress the italicized word more, while a <dfn> italic will prompt a brief pause from the machine.

Make HTML Italics Using CSS

You can also choose not to italicize text using HTML tags but by styling that piece of text using CSS. CSS is the most advisable means of making text italics if the use of italics is purely decorative and there is no semantic reason why you’re italicizing the text.

To make text italics using CSS, you need to wrap the portion of text in a span tag, add a class attribute to the tag, and add the italic font-style to the class. Here’s how:

<!DOCTYPE html>
<html>
<head>
<style>

.slanted {
  font-style: italic;
}

</style>
</head>
<body>

<p class="slanted">This is an italicized paragraph.</p>

</body>
</html>

The oblique style is similar to italics; however, it does not use different glyph shapes; it uses the same glyphs as the roman type, except slanted. To use the oblique style, you’ll need to apply the following setting to the font style:

.slanted {
  font-style: oblique;
}

Read More: How To Underline in HTML

Leave a Comment