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):
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:
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';
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);
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)