HTML <img> tag is used to insert images into a webpage. It requires the src attribute to specify the image file’s URL and supports optional attributes like alt for alternative text and width/height for dimensions. Nowadays website does not directly add images to a web page, as the images are linked to web pages by using the <img> tag which holds space for the image.
Syntax :
<img src="" alt="" width="" height="">
HTML image Tag Attributes
| Attribute | Description |
|---|---|
| src | Specifies the path to the image. |
| alt | Provides alternate text for the image, useful for informing users about the image and displaying in case of network issues. |
| crossorigin | Allows importing images from third-party sites with cross-origin access for use with canvas. |
| height | Specifies the height of the image. |
| width | Specifies the width of the image. |
| ismap | Specifies an image as a server-side image map. |
| loading | Specifies whether a browser should defer loading of images until certain conditions are met or load an image immediately. |
| longdesc | Specifies a URL to a detailed description of an image. |
| referrerpolicy | Specifies which referrer information to use when fetching an image (e.g., no-referrer, no-referrer-when-downgrade, origin). |
| size | Specifies image sizes for different page layouts. |
| srcset | Specifies a list of image files to use in different situations. |
| usemap | Specifies an image as a client-side image map. |
Example 1: The implementation of the <img> tag along with src, width, height, and alt attributes.
HTML
<!DOCTYPE html><html>
<body style="text-align: center;">
<h3>GeeksforGeeks logo</h3>
<img src=
width="420" height="100"
alt="Geeksforgeeks.org">
</body>
</html>
|
Output:
HTML img tag output
Explanation:
- In the above example The <img> tag’s src attribute specifies the image’s source location.
- The width and height attributes define the image’s dimensions.
- The alt attribute provides alternative text for screen readers and in case the image fails to load.
Example 2: The implementation of the style attribute to add a border to the image.
HTML
<!DOCTYPE html><html>
<body style="text-align: center;">
<h3>GeeksforGeeks logo</h3>
<img src=
width="420" height="100"
alt="Geeksforgeeks.org"
style="border:5px solid black">
</body>
</html>
|
Output:
HTML img tag output
Explanation:
- In the above exmaple The <img> tag is utilized to include an image in the HTML document.
- Width and height attributes are specified to define the dimensions of the image.
- An alt attribute is provided for accessibility, describing the image content for users who cannot view it visually.
Supported Browsers:
- Google Chrome 1
- Edge 12
- Firefox 1
- Opera 15
- Safari 1