HTML <img> tag
The <img> tag adds an image in the HTML document by linking the image to that page.
You must set the path URL where the image is present using the src attribute.
Syntax:
<img src=”source_URL” alt=”alternative text”>
Default value
display: inline-block;
How Browser will display
INLINE.
Difference between HTML4.01, XHTML and HTML5
| HTML4 | XHTML | HTML5 |
|---|---|---|
| Does not have an End tag | Must use an End tag | In HTML5, the align, border, hspace and vspace attributes are deprecated when they are used with <img> tag. |
Attributes used with <img> tag
| Attribute | Description |
|---|---|
| alt | Sets the alternative text which will be displayed to the user when the browseris not able to load the image. |
| longdesc | Defines a URL to show a page containing a long description about the image. |
| sizes | Sets multiple image sizes based for multiple page layouts |
| height | Sets the height of the image in pixels or %. |
| crossorigin | This allows the browser to use images from other websites. This enables the browser to use images from other website which has cross-origin access enabled.This can take any of these values - |
| ismap | This takes a boolean value. This decides whether or not the image is part of the server side image-map |
| usemap | This sets the image as a part of the client side image-map. It is referred using '#' followed by the map name. |
| src | Defines the URL/path of the image |
| srcset | This defines the group of URLs which the browser can use in multiple cases |
| width | Sets the width of the image in pixels. |
| align | To align the image with respect to its nearby elements. The alignment can be - top, right, bottom, left or center. (HTML5 does not support this attribute when it is used with the <img> tag). |
| border | Sets the border around the image in pixels. (HTML5 does not support this attribute when it is used with the <img> tag). |
| hspace | Sets the horizontal space around the image. This addes spaces at the left and right sides of the image. (HTML5 does not support this attribute when it is used with the <img> tag). |
| vspace | Sets the vertical space around the image. This addes a space at the top and bottom of the image. (HTML5 does not support this attribute when it is used with the <img> tag). |
Note/Warning/Danger/Info/Success It is always better to code the alt attribute with the <img> tag because if the browser is not able to load the image due to any reason, then the content or text inside the alt attribute will be shown to the users.
Global Attributes
The <img> tag supports Global attributes.
Event Attributes
The <img> tag supports Event attributes.
Supporting Browsers
Related Tags
<a> tag
– You can code the <img> tag inside <a> tag to show an image for the link. Once the user clicks on this image, he/she will be redirected to the linked page.