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...