HTML <img> Tag
Last Updated :
04 Mar, 2024
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
Share your thoughts in the comments
Please Login to comment...