Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

HTML <img> Tag

  • Last Updated : 27 Aug, 2021

HTML <img> tag is used to add image inside 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.

Syntax: 
 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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

Attributes: The <img> tag has following attributes.

 



  • src: It is used to specify the path to the image.
  • alt: It is used to specify an alternate text for the image. It is useful as it informs the user about what the image means and also due to any network issue if the image cannot be displayed then this alternate text will be displayed.
  • crossorigin: It is used to import images from third-party sites that allow cross-origin access to be used with canvas.
  • height: It is used to specify the height of the image.
  • width: It is used to specify the width of the image.
  • ismap: It is used to specify an image as a server-side image map.
  • loading: It is used to specify whether a browser should defer loading of images until some conditions are met or load an image immediately.
  • longdesc: It is used to specify a URL to a detailed description of an image.
  • referrerpolicy: It is used to specify which referrer information to use when fetching an image i.e. no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url.
  • sizes: It is used to specify image sizes for different page layouts.
  • srcset: It is used to specify a list of image files to use in different situations.
  • usemap: It is used to specify an image as a client-side image map.

 

Example 1: In this example we are using 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: In this example, we are adding 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
  • Internet Explorer
  • Safari
  • Opera
  • firefox



My Personal Notes arrow_drop_up
Recommended Articles
Page :