What are the advantages of using before an ele

问题:

Possible Duplicate:
<I> tag for icons?

I've seen in FontAwesome that to use their icon fonts, they are employing an empty <i>, something like this:

<a class="btn" href="#">
   <i class="icon-refresh"></i> Refresh
</a>

instead of wrapping it with <span> like this:

<a class="btn" href="#">
   <span class="icon-refresh">Refresh</span>
</a>

I've seen some other websites employ similar technique too. AFAIK, both technique utilizes the CSS pseudo-element :before, so I wonder why do they use <i> instead of wrapping it with <span>?

Are there any advantages on using an empty <i>? And is it semantic?

回答1:

The only advantage I can think of is just that <i> is shorter to write (and not to send over the wire, cause gzip doesn't care much if its i or span with 20-letters class) and it's distinctive from other markup. It is like self-made tag for icons.

But there are no other semantic value in <i> whatsoever.

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.

http://www.w3.org/International/questions/qa-b-and-i-tags/

So is it semantic? No. But no one cares, no big deal.

回答2:

A point that's mentioned here could be one reason - saving bytes..

For me it's ease of use..