HTML Tutorial: Complete HTML Tutorial
About Lesson

HTML <img> Tag


The <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.

Concept

The <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.

Implementation

Example 1: Embedding an Image

<img src="https://bit.ly/3skvbwJ" alt="Descriptive Text">
Loading

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">

Here, width and height attributes are used to specify the size of the image.

Loading

Global Attributes

The <img> tag supports all global attributes in HTML. These include, but are not limited to:

  • class
  • id
  • style
  • title

Event Attributes

The <img> tag also supports all event attributes in HTML, allowing you to handle browser events like:

  • onclick
  • onload
  • onerror
  • onmouseover
  • onmouseout

Attributes

Attribute Description
src Specifies the URL of the image.
alt Provides alternative text for the image.
width Specifies the width of the image.
height Specifies the height of the image.
crossorigin Allows images from third-party sites that allow cross-origin access to be used with canvas.
usemap Specifies an image as a client-side image map.
ismap Specifies an image as a server-side image map.
loading Indicates how the browser should load the image.
referrerpolicy Specifies which referrer to send.

Browser Support

Browser Support
Chrome Yes
Firefox Yes
Safari Yes
Opera Yes
IE Yes

 

Default CSS Settings

Most browsers will display the <img> element with the following default CSS settings:

img {
  display: inline-block;
  border-style: none;
}

The <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.

The HTML <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.