3.5 To Boldly Code: the HTML strong Tag, the b Tag, and You
There are so many different tags in HTML that it can be hard to know which one to use and when. Let’s take a look at two tags that can be used to emphasize text: the <b> bold tag and the <strong> tag. Using the strong tag in HTML causes the selected text to appear in boldface. But there’s another way to make your text bold. Using the <b> tag will also make your selected text show up in bold on your website.
Why are there multiple HTML elements that seemingly produce the same results? For further clarification on the subject, we turn to MDN Web Docs, an online resource for web developers, created by Mozilla. Mozilla is a community of developers who created Firefox, one of the top 5 most-used browsers worldwide.
MDN calls the <strong> tag the Strong Importance Element, and states that it should be used for content that is of “strong” importance,” like urgent warnings or very serious matters. Using the <strong> element will make your chosen text stand out on the page. In the Usage Notes, they recommend this tag be used for a single sentence or just a few words on your page.
What about the <b> tag?
On MDN’s website, this element is referred to as the Bring Attention To element. Older resources sometimes describe this as the “bold” tag, but MDN insists that “you should not use <b> for styling text.” It should be used “to draw attention to text without indicating that it’s more important.” MDN may be the web standard when it comes to HTML, but I wouldn’t mind a little more clarity from them on this point. Their site might benefit from more examples of how to properly implement these elements in a tricky situation.
In fact, I’m old enough to have taken a Webmastering class where we were taught the exact opposite: that the <b> tag existed to make text bold and that text should be styled using HTML. I should probably mention that this class did not delve into CSS. MDN acknowledges on their site that “Historically, the <b> element was meant to make text boldface.” But after styling information was deprecated in HTML 4, the meaning of the element has since changed.
Are these just 2 different ways to do the same thing?
Why do we need two different tags just to make our chosen text bold? Here’s where it starts to get complicated: the <strong> tag isn’t just about font weight. Using the tag on your website is actually adding a layer of meaningful information to the code.
As Jen Simmons says in her HTML Essential Training on LinkedIn Learning, “We aren’t just typesetting when we’re choosing elements like these. We’re conveying semantic meaning, human meaning.” This really comes into play when we get into accessibility. Because while these two elements might look the same to the average person viewing our website on their computer screen, those aren’t the only people who may be interacting with our site.
Building accessible websites
Choosing between two different HTML elements with similar effects may seem trivial. But we want to make the best choice we can to ensure that accessibility is baked into our website right from the start. Which brings us back to the <strong> element. When we use the strong element, we are giving the browser information about the text on our website. The browser will take this information and build a DOM tree. The accessibility tree will then be created, based on the DOM tree.
A quick word about the DOM tree
DOM stands for Document Object Model. The DOM tree consists of all the HTML elements on your website and their relationship to one another. It tells your browser how to interpret your site – which parts go together, and which parts are more important. When we choose our HTML elements with care, we can build a site that’s easily understandable not just by browsers, but by screen-readers and other accessible software and devices, too.
Back to my original question
What really is the difference between the <strong> tag and the <b> tag, then? It seems like it’s not that one is right or more correct, and the other is wrong. It’s that both can and should be used at different times. As MDN suggests, “It may help to realize that both are valid and semantic elements in HTML 5 and that’s it’s a coincidence that they both have the same default styling (boldface) in most browsers.” How and when to use each element depends on the meaning you want them to have within your text and within your document. But one thing is clear: if you just want your text to be bold, you’re better off using CSS.
This chapter is a revised version of a blog post titled “To Boldly Code: the HTML strong Tag, the b Tag, and You” on Writing References.
