Bold and Italic

If you’ve ever written a paper in a word processing program, chances are good that you have used bold and italic text. Bold is characterized by darker, thicker letter forms, while italicized text displays as thinner and slightly slanted. Generally, they are applied to text that needs to grab attention. Originally, there were two tags that covered this need—<b> and <i>.

However, as we’ve seen throughout this lesson, HTML now focuses more on semantics when deciding which tag to use. So now, the purpose of bold and italics should be taken into account. And thus, the <em> and <strong> tags were introduced.

Choosing which tag to use is based on some pretty subtle differences. The best way to decide which tag you need is to think about how your text would be read out loud. This is quite an appropriate technique given that the <em> and <strong> tags affect how a screen reader would read words for a vision-impaired user.

Use the <em> tag when your text should be read with an emphasis, especially in comparing one thing to another. Text with the <em> tag would be stretched out when spoken.

The <strong> tag is best when an important word or phrase is being used, especially ones used as a caution. Words with the <strong> tag would be spoken a bit louder to make sure they were noticed.

The <i> tag is for when text only needs to be in italics for typographical formatting purposes, but not for emphasis. This text just needs to stand apart as it’s something different than most of the text around it. This includes things like stage directions in a play script, or a word or phrase from another language. With this italics treatment, you wouldn't stretch out the phrase when speaking.

The <b> tag handles information that should be called out visually, but wouldn’t be read with any more volume or force. This can include a person's name in an article, product names, and vocabulary words.