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.
<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.
img src with width and height
Example 2: In this example, we are adding the style attribute to add a border to the image.
image source with border
- Google Chrome
- Edge 12 and above
- Internet Explorer
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!