<b> vs <span> in HTML5

Question

I've been having difficulty deciding when to use b and when to use span. The new semantics of the b element seem vague.

The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood

It sounds like that tag you use when you can't use strong, em, or i.

The b element should be used as a last resort when no other element is more appropriate.

But we've already got span for when phrasing content doesn't already have an applicable tag.

The span element doesn't mean anything on its own... It represents its children.

There's a list of example uses

key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede

But I can't find an underlying principle that ties them all together other than styling them bold. The old spec even mentions style:

The b element represents a span of text to be stylistically offset from the normal prose [emphasis added]

Styling is for CSS. We're also advised to use classes to show what the actual meaning is

authors can use the class attribute on the b element to identify why the element is being used

Which makes it sound like the uses are too divergent to be grouped by the tag alone. I can also use classes to explain the semantics of span.

The span element... can be useful when used together with the global attributes, e.g. class, lang, or dir.

Examples

If I want this:

Your score for CS 101 Final is 42%.

do I write

Your score for <b>CS 101 Final</b> is 42%.

or

Your score for <span>CS 101 Final</span> is 42%.

Or for this one:

Answer: 42

would it be

<b>Answer</b> 42

or

<span>Answer</span> 42

(It's only one key-value pair, so definition list would not apply.)

I'm not just interested in knowing the correct tags for the individual examples. I'd like to know why they're correct. What criteria do I use to decide on a b or a span tag?

Answer 1

The first example is fairly straightforward. You are trying to make "CS 101 Final" catch the eye, because it's more important than the "Your score for" text is. So that's

Your score for <strong>CS 101 Final</strong> is 42%.

With <b>, you're not trying to catch the eye. You want the whole text to be read evenly, but you marking certain words and phrases as being of use to the reader (utilitarian purposes). Frankly, there aren't many uses for this. The spec gives examples of keywords in an adventure game and in a report but it's not easy to find many uses.

The second example is trickier. Here, "Answer" is being stylistically offset. The word "Answer" is definitely not more important than the actual answer text, nor does it need to be brought to the particular attention of the reader for any other reason. It's just being marked as distinct from the actual answer text. However, the spec, in the "Common idioms without dedicated elements" section, suggests the use of <b> to mark the speaker in a conversation, and using it could be seen as being analogous to that. But basically it's just styling, so <span> with a class is likely the best choice.

What criteria do I use to decide on a b or a span tag?

As you can see from the above, it's a process of elimination. Is <strong> or <em> or <cite> appropriate? Yes - use them. No - Is <b> or <i> appropriate? Yes - use them. No then use <span>

Answer 2

span means nothing. Semantically, it doesn’t matter if there is a span element at all. So the question should not be when to use b vs. span, but it should be: Should I use b? (There are many cases where you might want to use b without needing a styling hook, so there would be absolutetly no need for span if b wouldn’t be appropriate.)

To decide if b is appropriate or not, I think it might help to imagine an intelligent user-agent that makes use of semantic markup. If everyone would use HTML5 correctly, what could such a user-agent deduce from content marked up with b?

I think the example use-cases mentioned in the definition give a pretty good idea:

• key words in a document abstract
• product names in a review
• actionable words in interactive text-driven software
• an article lede

→ Summarized: keywords.

So such a user-agent could, for example, extract all keywords in a paragraph/section and present them in a certain way, so you can decide if you’d like to read it.

In a recipe, it could be all ingredients. In your very question, it could be "b", "span" and "HTML5". On a product page, it could be the product name, main features and the manufacturer. Think of meta-keywords, but not document-wide (same as link vs. a).

Don’t let you mislead by a styling need. While, in many cases, boldface might be an appropriate styling, most of the time I never use any special styling for b.

Answer 3

My personal design guidelines are:

<B> (example) Should be used for decorative purposes only.

That is to say, content that does not gain anything more or less from a heavier font, but might look better in that place if it had it.