HTML IMG Tag
The HTML <img> tag plays a important role in enriching web content by embedding images into a webpage. This tag primarily uses the src attribute to define the URL of the image file. Additionally, it supports a variety of optional attributes such as alt for alternative text, and width/height to specify the dimensions of the image.
In modern web development practices, images are not directly embedded into a webpage. Instead, the <img> tag is used to create a placeholder for the image, linking it to the webpage and thereby optimizing the website performance.
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.
<!DOCTYPE html>
<html>
<body style="text-align: center;">
<h3>w3wiki logo</h3>
<img src=
"https://media.w3wiki.net/wp-content/uploads/w3wiki-13.png"
width="420" height="100"
alt="w3wiki.net">
</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.
<!DOCTYPE html>
<html>
<body style="text-align: center;">
<h3>w3wiki logo</h3>
<img src=
"https://media.w3wiki.net/wp-content/uploads/w3wiki-13.png"
width="420" height="100"
alt="w3wiki.net"
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
Conclusion
In conclusion, the HTML <img> tag is an essential tool for incorporating images into a webpage. It mandates the use of the src attribute to identify the image file’s URL, while also offering optional attributes such as alt, width, and height to enhance the user experience and accessibility of the webpage.
Contact Us