In this section, we will learn what HTML <img> element is and how to use it.

HTML Tag for Image: What is <img> Tag in HTML and How to Add/Insert an Image to HTML?

HTML <img> element is the way to add an image to an HTML document.

There are two main attributes in an <img> element that should be set whenever working with this element:

• src: this attribute stands for source and we use it to locate (set the address) of the target image so that browsers can send a request to that address (to get the image) and load the image into the document.
• alt: this attribute stands for alternative and the value for it is a string. This string is basically a description of the target image. This value will be seen instead of the target image if, for whatever reason, that image didn’t load in the document. Also, search engines use the value of this attribute to learn about the target image.

Other than these two attributes, there are width and height attributes which can be used to set the width and height of the target image in a document, respectively.

HTML <img> Tag Syntax:

<img src = “image-address” alt = “text-description-about-the-image”>

HTML <img> Tag Values

The <img> element is a single element and we only need to set its attributes.

Example: image in HTML

See the Pen image in HTML by Omid Dehghan (@odehghan) on CodePen.

Example: add an image in HTML

See the Pen add an image in HTML by Omid Dehghan (@odehghan) on CodePen.

Example: image insertion in HTML

See the Pen image insertion in HTML by Omid Dehghan (@odehghan) on CodePen.

HTML <img> Tag Attributes

Name	Description
alt	This attribute takes a string value, which should be a description of the image. If the target image didn’t load in the document, this text will appear instead. Also, search-engines like Google use the value of this attribute to learn about the target image.
crossorigin	Allow images from third-party sites that allow cross-origin access, to be used with canvas
height	With this attribute, we can set the height of the target image to be displayed in the document.
ismap	This attribute is used to specify an image as a server-side image map
loading	This attribute specifies if the loading of the target image should start immediately or it should be delayed until some conditions are met.
longdesc	This attribute is used to specify a URL to a detailed description of an image
referrerpolicy	This attribute declares if the target server (the place where the image exists should know the URL address of the location where this request is coming from.
sizes	Using this attribute, we can specify image sizes for different page layouts
src	This is the attribute we use to set the address of the target image. Browsers then use this address to bring the target image into the document.
srcset	With this attribute, we can set a list of image files to be used in different cases.
usemap	Using this attribute, we can specify an image as a client-side image map
width	With this attribute, we can set the width of the target image in the document.