Empty HTML tags

Question

I have a lot of empty span tags and so on in my code, due to CSS image replacement techniques. They trigger a HTML validation warning.

Should I care?

Answer 1

I agree with @Gumbo, but having lots of warnings that make no difference can hide the ones that you do need to pay attention to. If you can put something in the span that gets rid of the warning but doesn't break your UI, you should at least think about doing it.

Answer 2

I've made validation part of my workflow because it helps me catch mistakes early. And while I don't consider empty elements to be a problem, it negates some of the value of using a validator if I have to mentally parse a list of warnings each time and decide whether a warning is important or not. So I try to keep my pages both error- and warning-free so that a quick glance at the HTML Validator icon in the Firefox status bar only changes when there is a real problem. To that end I keep empty elements "unempty" by inserting an empty comment.

<span><!-- --></span>

(At least that works with the Tidy validator.)

Now, that being said, I don't think this is at all necessary for many situations. It is perfectly reasonably to think that adding eight extra characters to your code just to avoid a validator warning is ridiculous. But it works for me.

Answer 3

You should consider the behavior of the page for things like screen readers. It is common to actually put a few words describing the image in the tag that are then hidden by the image replacement.

See the CSS Zen Garden where you can see examples like H1 spans with text being replaced in CSS by images.

This will improve the not only the accessibility of your site, but also the search-ability.

Answer 4

An "empty" tag has a very specific definition in HTML:

<span/>

versus

<span></span>

The former is not permitted by the HTML 4.0 Strict DTD, so should be flagged by a validator. The only tags that can use the former syntax are those specifically identified as "EMPTY" in the DTD (eg, <br>).

The second form is valid HTML, and does not get flagged by the W3C validator.

So I have to assume that either (1) your validator is broken, or (2) you are using the tag incorrectly.