vs in HTML5

Answer 1

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 2

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 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.