What are some advantages to using <span style="font-weight:bold"> rather than <b>?

Question

I've been learning about semantic HTML, and I keep reading how tags like <i> and <b> should be avoided. But if I don't want to emphasize something, but just bold it visually, why would <b> be any worse than <span class="bold">? What are some advantages to using the more verbose <span class="bold"> syntax?

Answer 1

The issue with b and i elements is that they are not semantic, that is, they are about how things should look, not what they mean.

<span class="bold"> is actually no better, as it is also all about how something should look and is embedded in the page (a class name "bold" is not semantic either). It is better to use meaningful class names.

There are semantic tags, such as strong that are better.

As for class names - using a descriptive name is preferred - so <span class="sub-header"> is better than <span class="bold">, as it has meaning.

Answer 2

It's about the nature of markup. Take away presentation, and what you're left with should still convey your message.

The <b> and <i> tags are deprecated, which is why you shouldn't use them, but if you want to add emphasis to otherwise normal text you should use <strong> and <em> over a CSS solution. Having this in your HTML means that users who are disabled and using alternative browsing technologies like screen readers will still know that you intended emphasis. Adding CSS rules for bold and italic looks pretty but is not accessible.

Also bear in mind that you can then use CSS to apply style to your <strong> and <em> tags.