DEV Community

Dan Bamikiya
Dan Bamikiya

Posted on

The real image tag: <image> vs <img>

The image tag is used to tell the web browser to display an image.
It is usually written as <img /> and can have attributes such as (but not limited to) src - used to specify the path to the image, alt - holds a text description of the image, important for accessibility, width - the intrinsic width of the image(in pixels).

Now you're wondering what about the <image /> tag right? Well the image tag is (or was) used to display images also! But its infact not an HTML element!(as written in the spec):
an image of the html parsing spec about the image tag not being an html element

Browsers alias it to the <img> element but differently;

  • Firefox aliases it during parse time;
  • Chrome & Safari aliases it during element-creation time;
  • IE (Internet Explorer) aliases it throughout runtime;

as seen in the html parsing spec:
an image of the html parsing spec about how browsers should handle the image tag
https://html.spec.whatwg.org/multipage/parsing.html

So you can use it in your code and the browser will do what needs to be done(convert it to <img>) and process your code but is it valid HTML? No.

Well what about its behaviour during DOM manipulation?

Assigning its src value the path to an image:



document.querySelector('image').scr  = 'https://source.unsplash.com/random/150*150';


Enter fullscreen mode Exit fullscreen mode

doesn't work in Edge, Chrome, & Firefox but works in IE.

Creating the element and appending it to the DOM:



const image = document.createElement('image');
image.src = 'https://source.unsplash.com/random/150*150';
document.body.appendChild(image);


Enter fullscreen mode Exit fullscreen mode

Edge & Chrome & Firefox treats it as an unknown element and doesn't load the image but it works in IE.

So the real image tag is the <img> tag and the <image> tag is a tag that browsers aliases to <img> element.

Top comments (0)