HTML / CSS - Styling <b> or <i> tags instead of <span>

Question

Hi

I was just wondering if it's a good idea to do this. For example if you want to create round-cornered tabs using CSS, you would need a structure like this:

<li> <a href="..."> <span> Tab </span> </a> </li>
...

then you put the left tab corner background on the link tag and the right one the span (maybe it's a bad example, because you could use the list tag to avoid the span, but you get my point :).

So, what if I used <b> instead of <span>, because it's shorter? Would it cause problems with certain browsers, or search engines?

Answer 1

<b> and <i> are no longer acceptible - as they describe formatting and not semantics. I do not believe they are in XHTML.

Answer 2

The tags have semantical meaning to the document. Indeed, a search engine interprets <b> in another way than <span>.

My five cents: Use the correct tags in first place, and optimize the size of the page source by using tags with shorter names in like 100'th place.

Answer 3

<span> and <b> both have identical semantic meaning in HTML 4 (and XHTML 1): none. <span> because it's deliberately designed to have zero semantics, and <b> because it's purely presentational.

HTML5 slightly changes how <i> and <b> are described, essentially describing the sorts of purposes ‘italic’ and ‘bold’ text are typically put to. This is semantically weak but not quite semantics-free.

Either way, I wouldn't use <b> just to save a couple of characters. <span> is more explicit about what it is you're doing, adding an extra semantics-free element purely for styling purposes. (Until such time as you can get away with just using border-radius, in which case you won't need the wrapper.)