Dont ever use <B> in HTML... err... Wrong!

If you’ve ever Google’d the humble HTML <b> tag, and read more than three of the results returned, you’ll have inevitably come across the hordes of self-righteous knobs on StackExchange berating people (especially those new to HTML/CSS) for using the tag. Their reason? It’s semantically-invalid HTML. They. Are. Wrong!

The key to the <b> tag, or even the <i> for that matter (but that’s a different post for another day) is that the usage is different than what you might expect…

b is the Boldface Bring Attention To element¹

The <b> HTML element is used to draw the reader’s attention to the element’s contents, which are not otherwise granted special importance. This was formerly known as the Boldface element, and most browsers still draw the text in boldface. However, you should not use <b> for styling text or granting importance. If you wish to create boldface text, you should use the CSS font-weight property. If you wish to indicate an element is of special importance, you should use the <strong> element.

That does not necessitate being bold. That is a design decision separate to the semantic one. In days of yore, b meant Boldface. This is where the angst arises, because it is automatically assumed that you’re using <b> because you’re ignorant of <strong>.

I use this tag liberally across my site to mark up any text where I use a brand name, e.g. <b class="brand">Google</b> signifies that Google is a brand name, and then I do style it subtly differently (I switch out the serif font for the sans-serif and italicise) but importantly: that does not mean I am using it for that function. All I am doing by adding it to my HTML is saying that this text may need to be marked up as standing somewhat different to its surrounding context. What I do in the stylesheet afterwards is not a determinant of its validity as HTML markup.

My stylesheet declaring that

b.brand {
    font-family: sans-serif;
    font-style: italic;
}

is purely decorative and has no semantic meaning to the original markup. I might decide one day to not treat brand names any different from the surrounding text, and if I was to remove that stylesheet, my markup would remain perfectly valid. Or I could just remove the font-style: italic style:

b.brand {
    font-family: sans-serif;
    font-style: italic;
}

Some browsers still render <b> as bold, <i> as italicised, but that’s easily solved with a reset style in the root of your stylesheet, and it’s the browser’s fault and problem, not yours.

So the next time you get berated (or find yourself about to do the berating) take a moment to first discern the reason that page is marked up the way it is. Maybe drawing some attention to that element is correct, and you’re merely arguing about the stylistic choices of your fellows.