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
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.
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.