The correct tag to make text italic in general terms is ‘<em>’ tag. Because by default the web browser uses the ‘<em>’ tag to make text emphasize or italic.
<p>This is some <em>italicized</em> text.</p>But there is not only the ‘<em>’ tag that makes your text italic. There is another tag that is called ‘<i>’ tag that also makes your text italic.
Difference between ‘<i>’ and ‘<em>’ tag
But the question is “How to choose the correct html tag to make a text italic?”.
So the answer is, it depends on the situation why you want to make the text italic. So let say if you want to make text only for style or designing purpose, you should use the ‘<i>’ tag. But if you want to emphasize any text or you want to make the text portion stand out, or you want to focus on a specific text point. So you should use the ‘<em>’ tag to make your text italic.
<!DOCTYPE html>
<html>
<head></head>
<body>
<p>Hello world</p>
</body>
</html>
In the above example of code we have created a simple HTML document. Which has the declaration tag and basic root ‘<html>’ tag and two main tags ‘<head>’ and ‘<body>’.
And inside the ‘<body>’ tag you will see I have also added the paragraph element that has the starting tag ‘<p>’ and ending tag ‘</p>’ and the content “Hello world”.
Now let’s render this code in the web browser to see the changes of our code.
Step 2 – Make text italic using '<i>' tag
<!DOCTYPE html>
<html>
<head></head>
<body>
<p>Hello <i>world</i></p>
</body>
</html>
In the above example you will see I have wrapped the “world” word between ‘<i>’ and ‘</i>’ tags. Now lets see the changes in our web browser.
Now in the above screenshot you will see the word “world” is now italic. Now let’s make the text italic using the ‘<em>’ tag.
<!DOCTYPE html>
<html>
<head></head>
<body>
<p>Hello <em>world</em></p>
</body>
</html>In the above code you will see I have wrapped the word “world” with ‘<em>’ and ‘</em>’ tag to make the text italic. Now let’s render it in the web browser to see the changes.
In the above screenshot you will see no difference from the previous screenshot but the approach. So there is no difference by visualization but the meaning.
Congratulations, you have learned the use of ‘<i>’ and ‘<em>’ tag. And got the clear answer of the question “How to choose the correct html tag to make a text italic?”