<b> vs <span> in HTML5

Question

It was hard for me to decide when to use b and when to use span. The new semantics of element b seem vague.

Element b is a range of text that it seeks for utilitarian purposes, without emphasizing or implying an alternative voice or mood.

It looks like this tag is used when you cannot use strengths, em or i.

Element b should be used as a last resort when no other element is more suitable.

But we already have a span , because there is already no corresponding tag in the phrased content.

The span element means nothing. He represents his children.

In the list of examples used

keywords in the abstract of the document, product names in the review, valid words in the interactive text software or Lede article

But I can’t find a fundamental principle that ties them all together, rather than styling them boldly. the old specification even mentions style:

Element b is an interval of text, which should be stylistically offset from ordinary prose [emphasis added]

Styling for CSS. We also recommend using classes to show what the actual value means.

authors can use the class attribute for element b to determine why the element is used

Because of this, it sounds like uses too diverge to group only the tag. I can also use classes to explain span semantics.

The span ... element can be useful when used in conjunction with global attributes, for example. class, lang or dir.

Examples

If I want this:

Your rating for CS 101 Final is 42%.

writing

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

or

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

Or for this:

Answer: 42

would

 <b>Answer</b> 42 

or

 <span>Answer</span> 42 

(This is only one key-value pair, so the definition list will not apply.)

I'm just not interested in knowing the correct tags for individual examples. I would like to know why they are true. What criteria can I use to define b or span tag?

Answer 1

The first example is quite simple. You are trying to get "CS 101 Final" to get attention because it is more important than the text "Your rating". So this is

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

With <b> you are not trying to catch an eye. You want the entire text to be read evenly, but you mark certain words and phrases as useful to the reader (utilitarian purposes). Honestly, this is of little use. The specification gives examples of keywords in the adventure game and in the report, but it is not easy to find many uses.

The second example is more complicated. Here, the “Answer” is stylistically biased. The word "Response" is definitely no more important than the actual text of the answer, and it is also not necessary to attract the attention of the reader for any other reason. It is simply marked as different from the actual response text. However, the specification in the section "General idioms without highlighted elements" suggests using <b> to indicate the speaker in the conversation, and its use can be considered similar to it. But basically it's just a style, so <span> with a class is probably the best choice.

What criteria can I use to define b or span tag?

As can be seen from the above, this is a process of elimination. Does <strong> or <em> or <cite> ? Yes - use them. No - is <b> or <i> suitable? Yes - use them. No, then use <span>

Answer 2

span doesn't mean anything. Semantically, it doesn't matter if there is a span element at all. Therefore, the question should not be when to use b vs. span , but it should be: should b be used? (There are many cases where you can use b without requiring a stylistic hook, so there is no need for a span if b does not fit.)

To decide if b is suitable or not, I think this can help introduce an intelligent user agent that uses semantic markup. If everyone used HTML5 correctly, what could such a user agent do from content marked with b ?

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

• keywords in an abstract document
• product names in review
• valid words in interactive text software.
• article lede

→ Summed up : keywords .

Thus, such a user agent could, for example, extract all the keywords in a paragraph / section and present them in a specific way so that you can decide whether you want to read it.

In the recipe, it can be all the ingredients. In your question itself, it could be "b", "span" and "HTML5". On the product page this may be the name of the product, the main functions and the manufacturer. Think of meta - keywords , but not system-wide (just like link vs. a ).

Do not be fooled by style. Although in many cases bold may be the appropriate style, most of the time I never use the special style for b .

Answer 3

My personal design recommendations:

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

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