<img> tag in HTML is used to embed images in web pages. It’s a self-closing tag, meaning it doesn’t need a closing tag, and it’s one of the most commonly used tags in HTML for displaying visual content.
<img> tag allows you to incorporate images into your web pages, enhancing the visual appeal and conveying information that might not be possible through text alone. It’s essential for creating engaging user experiences, from product photos in an e-commerce site to logos and infographics.
Example 1: Embedding an Image
<img src="https://bit.ly/3skvbwJ" alt="Descriptive Text">
In this example,
src is the source attribute, which specifies the path to the image you want to display, and
alt is the alternative text attribute, which provides a text description of the image for accessibility purposes and in cases where the image cannot be displayed.
Example 2: Setting Image Dimensions
<img src="https://bit.ly/3skvbwJ" alt="Descriptive Text" width="500" height="600">
height attributes are used to specify the size of the image.
<img> tag supports all global attributes in HTML. These include, but are not limited to:
<img> tag also supports all event attributes in HTML, allowing you to handle browser events like:
|Specifies the URL of the image.
|Provides alternative text for the image.
|Specifies the width of the image.
|Specifies the height of the image.
|Allows images from third-party sites that allow cross-origin access to be used with canvas.
|Specifies an image as a client-side image map.
|Specifies an image as a server-side image map.
|Indicates how the browser should load the image.
|Specifies which referrer to send.
Default CSS Settings
Most browsers will display the
<img> element with the following default CSS settings:
<img> tag is a fundamental part of HTML, enabling the embedding of images into web pages. It’s crucial for enhancing the visual appeal and user experience of websites. By understanding and utilizing the
<img> tag effectively; you can create more engaging and visually appealing web content.
<img> tag brings the color and vibrancy of visual media to your webpage, creating a more engaging and dynamic browsing experience for your users. By understanding and efficiently using the tag and its accompanying attributes, you’ll be well on your way to designing visually appealing and accessible web pages.