Open In App
Related Articles

Image tag in HTML | <img> tag

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The HTML <img> tag is used to add images inside the webpage/website. 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. The <img> tag has two required attributes:

  • src – It specifies the path to the image
  • alt – It specifies an alternate text for the image if the image for any reason cannot be displayed on the webpage.

Syntax of image tag: 

<img src=”” alt=”” width=”” height=””>

Attributes used in image tag :

AttributeDescription
srcSpecifies the path to the image.
altProvides alternate text for the image, useful for informing users about the image and displaying in case of network issues.
crossoriginAllows importing images from third-party sites with cross-origin access for use with canvas.
heightSpecifies the height of the image.
widthSpecifies the width of the image.
ismapSpecifies an image as a server-side image map.
loadingSpecifies whether a browser should defer loading of images until certain conditions are met or load an image immediately.
longdescSpecifies a URL to a detailed description of an image.
referrerpolicySpecifies which referrer information to use when fetching an image (e.g., no-referrer, no-referrer-when-downgrade, origin).
sizeSpecifies image sizes for different page layouts.
srcsetSpecifies a list of image files to use in different situations.
usemapSpecifies 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:

img src with width and height

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:

image source with border

Supported Browsers: 

  • Google Chrome 1
  • Edge 12
  • Firefox 1
  • Opera 15
  • Safari 1


Last Updated : 31 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads