Did you know that this works in every browser?

< image src = " f1.jpg " >

Look, here's one:

An <image>

You might think it's leaking from SVG, but SVG images don't use src , they use xlink:href . Let's all take a moment to laugh at xlink. Done? Ok…

In the first age of the web, some people accidentally typed <image> instead of <img> . Browsers decided they should error-correct for it and we've been stuck with it ever since.

Update: As Elijah Manor points out, there's a comment hidden in the WHATWG spec suggesting a study was done in late 2005 showing ~0.2% of pages used the <image> element.

But what about:

document . querySelector ( 'image' ) . src = "kettle.jpg" ;

Well, that throws an error in Chrome, Safari and Firefox, because querySelector('image') returns null . Whereas it works fine in IE. Try it:

Change the image above

How about:

document . querySelector ( 'img' ) . src = "kettle.jpg" ;

That works in all browsers, including IE. In fact, querySelector('img') and querySelector('image') are completely interchangeable in IE. Try it:

Change the image above

How about:

var image = document . createElement ( 'image' ) ; console . log ( image . tagName ) ;

Well, it's "IMG" in Chrome, Safari & IE, but it's "IMAGE" in Firefox. How about:

var image = document . createElement ( 'image' ) ; image . src = 'f1.jpg' ; document . body . appendChild ( image ) ;

This works in Chrome, Safari & IE, but Firefox treats it as an unknown element and doesn't load the image. Try it:

Add image

What's going on?

It seems:

Firefox aliases 'image' to 'img' at parse-time

Chrome & Safari alias 'image' to 'img' at element-creation time

IE aliases 'image' to 'img' throughout the runtime

<image> isn't defined in any spec….