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, these styles 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 reads words for a vision-impaired user. Click through the tabs below to learn more.
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.
Example
I needed three carrots for this recipe, but they only had one left.
<p>I needed <em>three</em> carrots for
this recipe, but they only had one left.</p>
The <strong> tag is best used to highlight an important word or phrase, especially one used as a caution. Words with the <strong> tag would be spoken a bit louder to make sure they were noticed.
Example
Do not mark more than one answer.
<p><strong>Do not</strong> mark more than one answer.</p>
The <i> tag is for when text needs to be in italics only 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 in another language. With this italics treatment, you wouldn't stretch out the phrase when speaking.
Example
She was given carte blanche on the project.
<p>She was given <i>carte blanche</i> on the project.</p>
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.
Example
Triskaidekaphobia is the fear of the number 13.
<p><b>Triskaidekaphobia</b> is the fear of the number 13.</p>
Think you got it?
Complete the review activity below by matching each tag to its correct use.
