❮ Previous Next ❯

HTML <img> tag

The <img> tag allows to embed an image in an HTML document. It can be used as a link by using within the <a> element. It is an empty tag since it does not have end tag like </img>.

Type: Inline Element

By default, <img> tag is an inline-level element, but you can change to block element by using CSS.
<img src="URL" style="display:block;">

Syntax of <img> tag

<img src="URL">

Supported Browsers

Tag	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
<img>	Yes	Yes	Yes	Yes	Yes

Full code example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
 <img src="woman.jpg" alt="Example woman" width="200" height="200">
</body>
</html>

Run The code »

<i> tag is mainly used to mention a foreign word and important terms.

Attributes of <img> tag

There are many attributes of <img> tag. But the src attribute is compulsory to define the URL of the image.

align attribute:

It specifies the alignment of an image with respect to its surrounding elements.This attribute is obsolete in HTML5. To make image top, bottom and middle alignment, use CSS properties,vertical-align. To make image left and right alignment,use CSS properties,float.

Attribute values

Value	Note
top	It makes the image top alignment.
bottom	It makes the image bottom alignment.
middle	It makes the image middle alignment.
right	It makes the image right alignment.
left	It makes the image left alignment.

Supported Browsers

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
align	Yes	Yes	Yes	Yes	Yes

Example of align attribute (Obsolete)

<div class="container">
 <img src="image1" align="center">
 <img src="image2" align="left">
 <img src="image3" align="right">
 <img src="image4" align="top">
 <img src="image5" align="bottom">
<div>

Modern replacement using CSS

<div class="container">
 <img src="image1" class="center">
 <img src="image2" class="left">
 <img src="image3" class="right">
 <img src="image4" class="top">
 <img src="image5" class="bottom">
<div>

CSS properties

It must be defined within the <style> tag in the HTML document.

.container {
  display: flex;
  flex-direction: column;
  height: 300px;
}

.left {
  align-self: flex-start;
}

.right {
  align-self: flex-end;
}

.center {
  align-self: center;
}

.top {
  align-self: flex-start;
}

.bottom {
  margin-top: auto;
}

The above CSS replacement is valid when the <img> tag is used as block level element. For inline tag, use CSS properties float(left and right align) and vertical-alignment (top and bottom align).

alt attribute:
It provides an alternative text of an image. It is useful when the image is not displayed due to some reasons like low-net connection, wrong image name when coding. It is also helpful in SEO and screen readers. The value of the alt attribute must be related with the image.

Supported Browsers

Attribute Chrome Internet Explorer Firefox Safari Opera Mini

alt Yes Yes Yes Yes Yes

Example of alt attribute
```
 <img src="image1" alt="text">
```
border attribute:
It specifies the width of a border around an image. By default, there is no border around an image. The border attribute is obsolete in HTML5.

Supported Browsers

Attribute Chrome Internet Explorer Firefox Safari Opera Mini

border Yes Yes Yes Yes Yes

Example of border attribute (Obsolete)
```
<img src="image1" border="2">
```
Modern CSS replacement
```
<img src="image1" style="border:2px solid black;">
```
crossorigin attribute:
It allows to embed an image from another sites that fetch cross-origin request using with <canvas> element.

Supported Browsers

Attribute Chrome Internet Explorer Firefox Safari Opera Mini

crossorigin Yes Yes Yes Yes Yes

Basic syntax of crossorigin attribute
```
<img src="https://example.com/image.jpg" crossorigin="anonymous">
```
If crossorigin attribute is not used, the browser loads an image normally. This tag is used in drawing images within the <canvas> element and, is needed when applying WebGL or image processing.
height attribute:
It defines the height of an image. At least, the height attribute must be associated with the width attribute. In HTML5, its value must must be in pixel.

Supported Browsers

Attribute Chrome Internet Explorer Firefox Safari Opera Mini

height Yes Yes Yes Yes Yes

Example of height attribute (Obsolete)
```
<img src="image1" height="200" width="200">
```
Modern CSS replacement
```
<img src="image1.jpg" alt="Sample image" style="height:200px; width:200px;">
```
hspace attribute:
It specifies the number of space (white-space) on both right and left side of an image. It is not supported in HTML5. Use the CSS property- margin to give space around an image.

Supported Browsers

Attribute Chrome Internet Explorer Firefox Safari Opera Mini

hspace Yes Yes Yes Yes Yes

Example of hspace attribute (Obsolete)
```
<img src="image1" hspace="30">
```
Modern CSS replacement
```
<img src="image1" style="margin:0px 30px">
```
ismap attribute:
It is a boolean attribute which specifies that the image is a part of a server-side map. It is valid only if the <img> element is a descendant of an <a> element with a valid href attribute. When you click on such image-map, the clicked x and y coordinates are sent to the server.

A boolean attribute is an attribute that does not need its value and its presence alone means "true".

Supported Browsers

Attribute Chrome Internet Explorer Firefox Safari Opera Mini

ismap Yes Yes Yes Yes Yes

Example of ismap attribute
```
<a href="action.php">
  <img src="image" ismap>
</a>
```
longdesc attribute:
It provides a link for more details of an image. It is mainly used for the visually repaired user. It is obsolete in modern HTML and replaced by <figures + <figures elements. Its value can be either URL or id name of a page.

Supported Browsers

Attribute Chrome Internet Explorer Firefox Safari Opera Mini

longdesc No No No No No

Example of longdesc attribute (Obsolete)
```
<img src="image" longdesc="https://www.example.com/page2.html#id_name">
or
<img src="ostrich.jpeg" longdesc="#id_name">
```
Modern replacement
```
<figure>
  <img src="woman.jpg" alt="woman standing">
  <figcaption> Long-detailed description of the woman image. </figcaption> 
</figure>
```
name attribute:
It specifies a reference name of the <img> element which allows access by other scripts like JavaScript. It is obsolete in HTML5 and replaced by CSS property - id

Supported Browsers

Attribute Chrome Internet Explorer Firefox Safari Opera Mini

name Yes Yes Yes Yes Yes

Example of name attribute (Obsolete)
```
<img src="woman.jpg" name="myWoman">
```
Modern replacement using id attribute
```
<img src="woman.jpg" id="myWoman">
```
The above id name (myWoman) can be fetched by JavaScript.
document.getElementById("myWoman")

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
alt	Yes	Yes	Yes	Yes	Yes

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
border	Yes	Yes	Yes	Yes	Yes

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
crossorigin	Yes	Yes	Yes	Yes	Yes

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
height	Yes	Yes	Yes	Yes	Yes

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
hspace	Yes	Yes	Yes	Yes	Yes

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
ismap	Yes	Yes	Yes	Yes	Yes

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
longdesc	No	No	No	No	No

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
name	Yes	Yes	Yes	Yes	Yes

src attribute:

Itspecifies the URL of the image. The value of the URL may be within the current or domain, or another domain. This attribute is mandatory to be inserted any image into a web-page.

Supported Browsers

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
src	Yes	Yes	Yes	Yes	Yes

Example of src attribute

<img src="woman.jpg" alt="Woman standing">
<img src="https://learncodinghub.com/wp-content/uploads/2026/01/demo-output-small.webp" alt="Woman standing">

Attribute values

Value	Type	Note
src	Absolute	It specifies the URL of the image contained on another domain. Example: src="https://manipuristory.com/logo.png"
src	Relative	It specifies the URL of the image contained within the same domain. Example: src="/logo.png"

size attribute:
It defines specifies the different image sizes for the different display-sizes. It is useful for making responsive webpage and also improves in page loading. It is commonly used with srcset attribute.

Supported Browsers

Attribute Chrome Internet Explorer Firefox Safari Opera Mini

size Yes Yes Yes Yes Yes

Example of size attribute
```
<img
src="small.jpg"
srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw"
alt="Responsive image"
>
```
srcset attribute:
It defines multiple image sources with different widths so that the browers can selects best image based on the display size or device width. It is useful for making responsive webpage and also improves in page loading.

Supported Browsers

Attribute Chrome Internet Explorer Firefox Safari Opera Mini

srcset 34.0 or higher No 38.0 or higher 8.0 or higher 21.0 or higher

Example of srcset attribute
```
<img 
src="small.jpg"
srcset="small.jpg 300w, medium.jpg 600w, large.jpg 1200w"
alt="Demo image"
>
```
usemap attribute:
It specifies a map name (starting with "#") which must be be similar with the value of the name attribute of the <map> element. It is used in giving an image-map within an image which allows a clickable link. It must be used only after the <img> element.

Supported Browsers

Attribute Chrome Internet Explorer Firefox Safari Opera Mini

usemap Yes Yes Yes Yes Yes

Example of usemap attribute
```
<img src="woman.jpeg" alt="Woman" usemap="#demo">

<map name="demo">

<area shape="rect" coords="47,68,220,150" href="rectangle.html" alt="rectangle" download>

<area shape="circle" coords="373,107,52" href="circle.html" alt="Circle" download="RedCircle">

</map>
```
vspace attribute:
It specifies the number of space (white-space) on both top and bottom side of an image. It is not supported in HTML5. Use the CSS property- margin to give space around an image.

Supported Browsers

Attribute Chrome Internet Explorer Firefox Safari Opera Mini

vspace Yes Yes Yes Yes Yes

Example of vspace attribute (Obsolete)
```
<img src="image1" vspace="30">
```
Modern CSS replacement
```
<img src="image1" style="margin:30px 0px">
```
width attribute:
It defines the width of an image. At least, the width attribute must be associated with the height attribute. In HTML5, its value must must be in pixel.

Supported Browsers

Attribute Chrome Internet Explorer Firefox Safari Opera Mini

width Yes Yes Yes Yes Yes

Example of width attribute (Obsolete)
```
<img src="image1" height="200" width="200">
```
Modern CSS replacement
```
<img src="image1.jpg" alt="Sample image" style="height:200px; width:200px;">
```

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
size	Yes	Yes	Yes	Yes	Yes

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
srcset	34.0 or higher	No	38.0 or higher	8.0 or higher	21.0 or higher

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
usemap	Yes	Yes	Yes	Yes	Yes

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
vspace	Yes	Yes	Yes	Yes	Yes

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
width	Yes	Yes	Yes	Yes	Yes

❮ Previous Next ❯

HTML Basics

HTML Tags

HTML <img> tag

Syntax of <img> tag

Supported Browsers

Full code example

Attributes of <img> tag

Attribute values

Supported Browsers

Example of align attribute (Obsolete)

Modern replacement using CSS

CSS properties

Supported Browsers

Example of alt attribute

Supported Browsers

Example of border attribute (Obsolete)

Modern CSS replacement

Supported Browsers

Basic syntax of crossorigin attribute

Supported Browsers

Example of height attribute (Obsolete)

Modern CSS replacement

Supported Browsers

Example of hspace attribute (Obsolete)

Modern CSS replacement

Supported Browsers

Example of ismap attribute

Supported Browsers

Example of longdesc attribute (Obsolete)

Modern replacement

Supported Browsers

Example of name attribute (Obsolete)

Modern replacement using id attribute

Supported Browsers

Example of src attribute

Attribute values

Supported Browsers

Example of size attribute

Supported Browsers

Example of srcset attribute

Supported Browsers

Example of usemap attribute

Supported Browsers

Example of vspace attribute (Obsolete)

Modern CSS replacement

Supported Browsers

Example of width attribute (Obsolete)

Modern CSS replacement