Slightly Remarkable

There is no such thing as a non-semantic SPAN or DIV

At least, in a sense. “What!?!! You’re crazy!” you say. Well, for your information, according to the W3C the SPAN and DIV elements have no semantic value, except that they can be used where no semantic or structural tag exists, making them as meaningless as not having a tag in the first place (save the fact that a tag is present for structure and/or presentation, but not semantics). Therefore their only drawback is that they increase page weight. Admittedly, it is best practice to avoid using additional HTML where unnecessary, however the disadvantage of using additional HTML tags such as SPAN and DIV is minimal (page weight increase).

I said above that there is no such thing as a non-semantic SPAN or DIV in a sense. Let me elaborate on the reasoning behind that. If, by saying non-semantic, you mean that SPANs and DIVs have no semantic value, then there is indeed a such thing as a non-semantic SPAN or DIV — in fact, with that reasoning, all SPANs and DIVs are non-semantic, which makes the adjective “non-semantic” redundant (except that there is a tag in place, giving a structural, and often presentational, meaning to the element, but not a semantic one). On the other hand, in the sense which I spoke on above, if by saying non-semantic you mean that it is bad practice to use SPANs and DIVs where they are inappropriate due to their semantic value, then you are incorrect, because they have no semantic value to begin with. As a result, the statement “non-semantic SPAN or DIV” is highly redundant, since SPANs and DIVs are inherently non-semantic.

Back to page weight

Once you understand that SPANs and DIVs don’t confuse screen-readers and other handicap-assistant software, your only reason to argue that adding an extra DIV or SPAN (or HTML comment) is a bad idea is that it increases the page weight. However, when you come to realize that the majority of a page’s weight is from its content, you’re on the losing end of the argument. The template itself can easily be between 2-10 kilobytes (this page, including its content, makes a total of roughly 4k, excluding images), and still be much smaller than a table layout’s template. Unless you’re going for a strictly bare-bones design (which would not require extra DIV or SPAN elements anyway), there should be no problem with the size of the page. If your page is 180k, following the addition of content, then instead of trying to reduce the amount of HTML in your template (unless your HTML is 50%+ of the total page weight), perhaps you should try reducing the amount of content or splitting up the content into multiple pages. There are different approaches to remedying the problem of a very heavy page, but consider the biggest source of your page weight (the content) before attempting to reduce the size of your template (and risk compatibility).

So just what are you saying?

All I’m saying is there’s no reason to freak out about additional, meaningless markup for presentation — or structure. If your image replacement technique requires an extra SPAN, so what? It’s just a few more bytes. At least it’s cross-browser compatible and accounts for most, if not all, of the problems it tries to fix (for example, CSS on/images off). You may prefer to omit such meaningless tags, and that’s a good general practice, but preference does not indicate necessity. I’ll give up a few bytes of bandwidth/loading time any day to permit more accessible documents.