As HTML continues to evolve and incorporate more useful native features that improve both the user and developer experience, confusion can arise when choosing the most appropriate tag among a list of similar options.
A good example of this is when trying to determine whether to use <strong> , <b> , <em>, or <i> tags in your markup. Stylistically, <strong> and <b> tags accomplish the same thing, as do <em> and <i> tags. So, how do you know which tag to use and when to use it?
When to Use the <strong> Tag
The <strong> tag is used when we want to indicate the importance, seriousness, or urgency of a word or section of content without changing the meaning of the content itself.¹
When to Use the <em> Tag
The <em> tag places stress emphasis on a particular piece of content in a way that changes the actual meaning of the content. Whenever we want to emphasize something in our markup with verbal stress, we should use <em> tags.²
When to Use the <i> Tag
The <i> tag is used to convey a different mood or voice from the surrounding content. It’s often used with foreign words or idiomatic phrases, technical terms, ship names, thoughts, etc.³
When to Use the <b> Tag
The <b> tag draws attentions to word or section of content for utilitarian purposes without conveying extra importance, emphasis, alternate voice or mood, etc.³ It is the least semantic of the HTML tags we’ve discussed in this post, and should only be used when no other tag is more appropriate.
Why So Many Tags?
Now that you know more about the above HTML tags and the best time to use them, you might be wondering why we have four tags to accomplish more or less the same two outcomes (increase importance or emphasis content).
Well, in the words of Puff Daddy:
“Mo Tags, Mo Semantic Options.”
As I’ve touched on before, taking advantage of more semantic HTML options gives your markup meaning to web browsers and screen readers, helps with SEO, makes it easier to read and debug, and provides a better overall experience to your users.
Bruce Lawson - co-author of Introducing HTML5 and self-proclaimed “Web Standards Lovegod” - recently declared semantics our “Flux Capacitor” when it comes to improving accessibility, usability, and future-proofing websites and applications. The best part is we get all of this enhanced functionality right out of the box - no extra work required! 🤘
Evolving HTML standards aimed at improving semantics have given us new, hyper-specific tags designed to make our markup even more precise and readable. This also means that we have very similar, yet subtly different tags to use in our markup, which can be confusing.
In the end, I think a bit of confusion (which can be alleviated by helpful resources like HTML5 Doctor) on which tags to use is a fair trade off for the semantic improvements we get by having both <strong> and <b> , or <em> and <i> tags at our disposal.
Thanks for reading! If you’re interested in learning more about the fundamentals of HTML, CSS, and JavaScript, follow Web Dev Basics on Medium. Ready to write some code? Sweet! Sign up for course and learn the basics of web development.