HTML : Bold, Italic and Underline

Bold Text

To bold text, use the <strong> or <b> tags:

<strong>Bold Text Here</strong>

or

<b>Bold Text Here</b>

What’s the difference?

Semantics. <strong> is used to indicate that the text is fundamentally or semantically important to the surrounding text, while <b> indicates no such importance and simply represents text that should be bolded.

If you were to use <b> a text-to-speech program would not say the word(s) any differently than any of the other words around it - you are simply drawing attention to them without adding any additional importance. By using <strong>, though, the same program would want to speak those word(s) with a different tone of voice to convey that the text is important in some way.

Italic Text

To italicize text, use the <em> or <i> tags:

<em>Italicized Text Here</em>

or

<i>Italicized Text Here</i>

What’s the difference?

Semantics. <em> is used to indicate that the text should have extra emphasis that should be stressed, while <i> simply represents text which should be set off from the normal text around it.

For example, if you wanted to stress the action inside a sentence, one might do so by emphasizing it in italics via <em>: "Would you just submit the edit already?"

But if you were identifying a book or newspaper that you would normally italicize stylistically, you would simply use <i>: "I was forced to read Romeo and Juliet in high school.

Underlined Text

While the <u> element itself was deprecated in HTML 4, it was reintroduced with alternate semantic meaning in HTML 5 - to represent an unarticulated, non-textual annotation. You might use such a rendering to indicate misspelled text on the page, or for a Chinese proper name mark.

<p>This paragraph contains some <u>mispelled</u> text.</p>

With all that being said, I highly recommend you keep learning!

Thank you for reading this article. Please feel free to connect with me on LinkedIn and Twitter.