hr is good for web standards design

Having thought about it a little, I think HR is a pretty good tag to use for web standards-based websites.

The HR tag is or has been considered perhaps a bit dated and not for ‘modern’ use and indeed when recently building it into a web standards-based page, I found myself wandering about looking up how best to style it as I had become rusty with the ways I could / couldn’t work with this tag.

I found that one browser will style HR differently from another (no surprises there then as well explained here. But after a quick fiddle I found that I could not easily get what I wanted, which was no inherent visible presence when CSS was enabled (for computer screen viewing, leaving me able to apply a border or background) and the normal HR display when CSS was disabled or when viewing on a small screen device (or a print out).

Here’s the answer I came up with, it’s compromised in two ways, but I don’t think fatally so:

And the CSS:

.altHr hr {
display: none;
}
.altHr {
clear: both;
border-top: 1px solid #D1D1D1;
}


The compromises:

1. It uses a ‘wasted’ tag. The div tag here is arguably not needed if one is looking for perfect markup and perfect content (i.e. no markup used unless it directly styles some real content).
2. It uses a non-breaking space (to fill an otherwise empty tag) that is not meant as content (using fake content to aid my styling of a page..? Surely that’s a no, no?).

Well, yes, I think perhaps point 2. is indeed a ‘no, no’, but stop. Think. Am I proposing some vauge reversal back out of the cleanliness of web standards into the moras of muck that was the likes of the font tag (shudder)?

No.

All (all) I am suggesting is a self contained, clear, light, simple way to have my cake and eat it - a great, simple hr tag for non-styled or ‘lite’-styled uses and total CSS control for my styled uses. Until I see a better way, I am prepared to use this cludge-lite to allow great hr’s back into my designs.