Clever as I was, I thought I had come up with the ultimate way of displaying the logo on my web page.

<h1><img src="mylogo" alt="mylogo" \></h1>

What's so special about this?

Well, if the browser has images enabled, it's nothing but a regular logo image.

However, if they have images disabled (which is becoming more and more popular with small devices with browsers), then the alt text of the image will be shown instead. Due to that I've wrapped the image in <h1> tags, this alt text will be affected by them. I've styled the <h1> tag so that the alt text looks almost like my original image logo, the same font, same size, etc. This means that even browsers where images are disabled will see the same logo, although in text form, slightly more fuzzy.

Next, if the browser even has CSS disabled, or my CSS style file is somehow blocked, then the alt text will be formated according to the standard setup for the <h1> tag. Although this isn't that close to my original logo, it's still pretty clear that this is the main logo on the page, and not just some text at the top.

I was so happy with this solution, thinking I had thought of everything, without having to resort to JavaScript, until I tried to get it validated. I got this error:

document type does not allow element "h1" here; missing one of "object", "ins", "del", "map", "button" start-tag.

So, I ask you, is there a way to get all the features I mentioned, and still validate?