It was natural to start off a series on web elements with a vilified element that never made it into any web standard and never will, the spacer. Often elements are made for minute details that nobody, man or machine, are interested in. Should abbr or acronym be used? Who cares, except the poor web developer confused by reading the literature and trying to do the right thing.

spacer is an element signifying nothing, containing nothing, and displayed as a rectangle of nothing. It is a pure layout hack. You know the the drill. The correct and proper element to use is object, or use img if you have to for compatibility reasons. The spacer is not to be used. And this is a pity. The wonderful thing about spacer is that you know it is a hack and that it is completely devoid of meaning.

When we do Small-Screen Rendering or a voice representation of a page the goal is to remove the useless stuff and present the useful stuff as well as possible. But what is useless? If a tiny image is stretched horizontally or vertically we assume it is a spacer element and remove it. We are practically always right, but still it is guesswork. For all we knew we could have removed useful information. If that img had been a spacer instead we could have removed it with no remorse.

As it happens there is a convention to express that an img has no real significance. The img element has an obligatory alt attribute, if set to an empty string it is a signal that it has no text equivalent and is thus, in the grand scheme of things, useless. <img src="image-address" alt=""> is just another way of saying spacer with a little more colour.

What about object? This is an element that slices and dices but unlike img there is no way to state the difference between <img src="image-address" alt=""> (i.e. this image is expendable) and <img src="image-address"> (i.e. the designer hasn’t considered how the image shall be used in other contexts). <object data="image-address"></object> can mean either of these things, we just don’t know. Our options are either to make a guess or to force the decision on to the user.

object is the most general and expressive element with the most flexible fallback. Given <object id="a"><object id="b"><b>Markup</b></object></object> the object with id=b will be shown if and only if the object with id=a can’t be shown. If neither can be shown <b>Markup</b> will be shown instead. But only the author knows if the fallback is important or not. Unlike the HTTP q property (“q” is for quality) we can’t know if the two id=a and id=b objects are equivalent (e.g. Flash and SVG versions of the same graphics) or if id=b is a barely adequate substitute or worse (e.g. a poster imploring the user to download the Flash plugin).

What can we learn from that? The lowly spacer isn’t just more expressive for its purpose than the worker img element, it beats the folk hero object. I am not proposing to introduce the spacer element into “polite company”, this ugly duckling won’t turn into a swan. CSS can do the same job better, though you need Opera if you want to fully represent what the spacer element can do, and much more flexibly. CSS is the language for layout hacks.

But spacer has many of the properties a good element should have. Its use is clear, you won’t use it unless you mean it. It tells something the web designer knows the user agent needs to know but can’t truly on its own (that this element is used purely for layout purposes). We don’t need to know why this layout hack was added, just that it is a layout hack that will not transfer to other layouts.