Dont ever use in HTML... err... Wrong!

Sun, 14 Apr 2024 17:59:06 +1000

If you’ve ever Google’d the humble HTML  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  tag, or even the  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  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  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  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  because you’re ignorant of .

I use this tag liberally across my site to mark up any text where I use a brand name, e.g. Google 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  as bold,  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.

Definition from mdn web docs ↩︎

Rant:
Why the rant? I use all over the site and some goose had at me about it.

Rant — Getting Out There

Dont ever use in HTML... err... Wrong!