Open In App
Related Articles

HTML <img> Tag

Improve Article
Improve
Save Article
Save
Like Article
Like

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: 
 

<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
  • Edge 12 and above
  • Internet Explorer
  • Safari
  • Opera
  • firefox

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 22 Jul, 2022
Like Article
Save Article
Previous
Next
Similar Reads
Complete Tutorials