Jake Przespo

This idea started from a tweet a while back about the difference between i, b, and span semantically speaking. When coding certain content, why not write something shorter for styles? I know it is taught to never use b or i anymore, but I felt like giving it a shot.

An Example

On one of the personal projects, I have a form that uses asterisks to represent which inputs are mandatory. As I was coding it up, I started questioning what the difference between using a span with a class, or just a simple i. Both elements do not describe its containing data, so I kept my markup a tad smaller:

1

<span class="req">*</span>

vs.

1

<i>*</i>

Using the i element for this type of content doesn’t make a difference in my opinion. The advantage to doing this, is writing a little less markup.

What W3C thinks

W3C’s definition of a span is “a generic wrapper for phrasing content that by itself does not represent anything.” In my opinion, this is exactly what is and bs are as well. They are only used for presentational purposes, in which we all overwrite in our CSS. Towards the bottom of this article, it seems as if the W3C thinks this as well, but also recommends adding a class to describe the containing content. They also remind us that we should always use an appropriate element when possible.

HTML5

The HTML5 spec, that is still being developed, explains that is and bs will have meaning.

i:

The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized.

b:

The b element represents a span of text to be stylistically offset from the normal prose without conveying any extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is boldened.

“W3C Text-level semantics” by the W3C

Stick with Tradition

I think it is better to continue using a span element with a class. It will help when transitioning to HTML5 in the future and continue to be semantically correct in older doctypes as well.