How to make text Italic in HTML

problem

You’re learning HTML and wish to format some text into Italic. In this post we will see two ways to do this.

SOLUTION 1

Using the Italic <i> tag. This tag has an opening and a closing tag. For example, if we want to make a line of text Italic we can do as follows:

italic.html
				
					<i>A line of text in Italic</i>
				
			
output
a line of text in italic example

This tag can be nested, similarly to the Bold <b> tag. More specific, if we want to make only a section of the text Italic.

For example, only the word Italic

italic.html
				
					<p>
    A line of text in <i>Italic</i>
</p>
				
			
output
make one word Italic out of a whole text

As you can see we used the <i> tag as the inner tag inside the paragraph <p> tag.

It can be used as an outer tag and make the whole paragraph or span Italic.

For example:

italic.html
				
					<i>
    <p>A line of text in Italic</p>
</i>
				
			
output
making a paragraph in Italic HTML
using a span
italic.html
				
					<i>
    <span>A line of text in Italic</span>
</i>
				
			
output
make a span Italic in HTML

solution 2

Using the <em> tag. This is used in the same way as the <i> tag with opening and closing tag. It’s used to define emphasized text. It shows as well as Italic.

For example:

italic.html
				
					<em>
    <span>A line of text in Italic</span>
</em>
				
			
output
Emphasize text in HTML example
Combining both Italic and Bold tags

What if we want to make a word Italic and another word Bold in a sentence? We can simply use the 2 respective tags, for example:

italic.html
				
					<span>
    A line of text in <i>Italic</i> and in <b>Bold</b>
</span>

				
			
output
Make a word in Italic and another word in Bold in HTML
Doing the whole line both Italic and Bold

For example:

italic.html
				
					<i>
    <b>
        <span>
            A line of text in Italic and in Bold
    	</span>
    </b>
</i>
				
			

This is a nice example of nested tags. First we open the Italic <i> tag and inside it the Bold <b> tag and inside that one the <span> that has the text we want to format. Then, we use the respective closing tags in the reverse order we opened them.

output
Make text bold and Italic in HTML

In the example above, it doesn’t matter if we first start with the <i> tag or the <b> tag. At the end of the day, both of them are applied on the inner most; the <span> tag in this case.

conclusion

In this post we saw how to format some text in Italic using the following 2 tags:

  • <i> Italic tag </i>
  • <em> emphasis tag </em>

Share it!

Facebook
Twitter
LinkedIn
Reddit
Picture of Ellion

Ellion

Professional IT consultant, writer, programmer enthusiast interested in all sorts of coding.
Eats all cookies 🍪

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x