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.

There are rules. No matter where you go. You have the law, you have the rules of grammar, you have someone in authority over you at all times (no matter who you are or what you think, and yes I am implying a supreme being). These rules may be seen as limitations in some eyes, but in others’ eyes (including those who established the rules) these rules define freedom. In America, we are free to do a great many things, but we are not allowed to do some things (for example, murder, steal, and so on). The reasons behind this are obvious. Without these rules, society would fall apart. There is no direction without rules, so each goes his own way, because we are human.

This is all directly related to the use of valid HTML. The W3C, our Web leaders (whether you want to consider them supreme lords, government officials, or grammar teachers), has established a set of grammatical rules for a number of languages. The purpose behind these rules is precisely the same as the purpose behind rules for grammar or spelling. Each of us learns to read what is written correctly. When something is written incorrectly, we either have trouble comprehending it or can’t comprehend it at all. We can, however, guess at what is meant, and often understand the meaning behind it. This is how user agents understand invalid HTML. So why use valid HTML? Why do you use valid HTML? I use it for the same reason that I use proper grammar. I don’t believe in being disorganized or defying authority, unlike some people who can’t understand simple things such as why we should use ALT attributes (or, following the analogy, who can’t understand simple things such as why the period goes inside the quotes). And don’t argue with me! I know grammar like the back of my hand. The period always goes inside of the quotes, no matter if it’s a quotation or not.

I’d go on about how Mr. Davidson is wrong — wrong for the wrong reasons. I agree with him to an extent, but for different reasons. That’s not what this entry is about, though. Do you use valid HTML? Why or why not?

Update: okay, I want to make something clear right now. I checked and found that Mike mentioned this post on his blog, and I want to say that I made this post a long time ago and didn’t know what I was talking about. Mike is right and I made a major mistake, but I do not want this to damage my reputation. I’m painfully reminded of this entry by Mike’s new post. I think I’ve been punished enough already, so I want to publicly apologize for my statements. I’ve learned from this mistake and will no longer make irrational posts just because a thought popped into my head.