Welcome to HTML5-Tutorials

Our site offers a lot of HTML5 learning from absolutely beginning to advanced level.If you want to make a website with HTML,this site will completely guide you a lot.So learn HTML5 syntax and form of coding easily with this website.If you have any doubt,leave a message on us.We will return you so soon.This site includes innumerable number of references you need to do after studying their corresponding elements.

In this page,we will learn about HTML <img> tag.

Overview Content

1 Use of <img> tag
2 Example of <img> tag
3 Supported Browsers
4 Full Code Example
5 Attributes of <img> tag
     5.1 align
     5.2 alt
     5.3 border
     5.4 crossorigin
     5.5 height
     5.6 hspace
     5.7 ismap
     5.8 longdesc
     5.9 name
     5.10 sizes
     5.11 src
     5.12 srcset
     5.13 usemap
     5.14 vspace
     5.15 width

Use of <img> tag

The <img> tag defines an HTML image and it allows to embed images in the document.
This tag has many attributes but the only essential attribute is src attribute.

Type:Empty tag

Example of <img> tag

<img src="ostrich.jpg" height="222" width="504" alt="Ostrich">

Supported Browsers.

Tag
<img> Yes Yes Yes Yes Yes

Full Code Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="ostrich.jpg" height="222" width="504" alt="Ostrich">
</body>
</html>

Output

Ostrich

Attributes of <img> tag

Tag Value Notes
align top
bottom
middle
right
left
It specifies the alignment of an image with respect to its surrounding elements.
alt texts It specifies an alternative texts of an image.
border pixels It specifies the width of a border around an image.
crossorigin anonymous
use-credentials
It allows to embed the images from third-party sites that fetch cross-origin request using with <canvas> element.
height pixels It specifies defines the height of an image, in pixels.
hspace pixels It specifies the number of space(white-space) on both right and left side of an image.
ismap ismap It specifies that the image is part of a server-side map.
longdesc URL It provides link(s) for more details of an image.
name texts It specifies the name of the HTML <img> element.
sizes It specifies the different image sizes for the different display-size.
src URL It specifies specifies the URL of the image.
srcset URL It specifies the URL of a set of image for the user agent to use.
usemap #mapname It specifies a mapname(starting with "#") which is to be similar with the name attribute of the <map> element.
vspace pixels It specifies the number of space(white-space) on both top and bottom side of an image.
width pixels It defines the width of an image, in pixels.

1. align attribute

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

Syntax:

<img align="left | right | middle | top | bottom">

Example:

<img src="ostrich.jpeg" align="left">

Supported Browsers

Attribute
align Yes Yes Yes Yes Yes
Attribute values
Attribute Notes
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.

2. alt attribute

Explaination:The alt attribute is used to provide an alternative texts of an image.
It is useful when the image could not displayed due to some reasons like low-net connection, wrong img-name when coding.
The value of the alt attribute must be related with the image.

Syntax:

<img alt="text">

Example:

<img src="ostrich.jpeg" alt="Ostrich">

Supported Browsers

Attribute
alt Yes Yes Yes Yes Yes


3. border attribute

Explaination: The border attribute specifies the width of a border around an image.
By Default, there is no border around an image.
The border attribute is not supported in HTML5.Use CSS property border within the "style" attribute such as <img src="ostrich.jpeg" style="border:5px solid red">

Syntax:

<img border="pixels">

Example:

<img src="ostrich.jpeg" border="5">

Supported Browsers

Attribute
border Yes Yes Yes Yes Yes

4. crossorigin attribute

Explaination: The crossorigin attribute allows to embed the images from third-party sites that fetch cross-origin request using with <canvas> element.

Supported Browsers

Attribute
crossorigin Yes Yes Yes Yes Yes

5. height attribute

Explaination: The height attribute defines the height of an image, in pixels.
At least, the height attribute must be associated with the width attribute. In HTML5, the value of height and width attribute must be in pixels.

Syntax:

<img height="pixels">

Example:

<img src="ostrich.jpeg" height="222" width="504" alt="Ostrich">

Supported Browsers

Attribute
height Yes Yes Yes Yes Yes

6. hspace attribute

Explaination: The hspace attribute specifies the number of space(white-space) on both right and left side of an image.
It is not supported in HTML5.Use the margin CSS property to give space around an image like
<img style="margin:0px 30px" src="ostrich.jpg">.

Syntax:

<img hspace="pixels">

Example:

<img src="ostrich.jpeg" height="222" width="504" alt="Ostrich" hspace="30">

Supported Browsers

Attribute
hspace Yes Yes Yes Yes Yes

7. ismap attribute

Explaination: The ismap attribute is a boolean attribute.It specifies that the image is part of a server-side map.
The ismap attribute 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 coordinates are sent to the server.

Syntax:

<img ismap>

Example:

<a href="action.php">
<img src="ostrich.jpeg" ismap>
</a>

Supported Browsers

Attribute
ismap Yes Yes Yes Yes Yes

8. longdesc attribute

Explaination: The longdesc attribute provides link(s) for more details of an image.
Generally, the values of longdesc attribute are URL or an element id.

Syntax:

<img longdesc="string">

Example:

<img src="ostrich.jpeg" longdesc="#desc_example">
<img longdesc="https://www.example.com/page2.html#desc_example" src="ostrich.jpeg">
<img src="ostrich.jpeg" longdesc="full_desc.html">
<img src="ostrich.jpeg" longdesc="https://www.example.com/page2.html">

Supported Browsers

Attribute
longdesc Not Supported Not Supported Not Supported Not Supported Not Supported

9. name attribute

Explaination: The name attribute specifies the name of the HTML <img> element.
It was not supported in HTML5.Use id or class attribute instead.

Syntax:

<img name="text">

Example:

<img src="Ostrich.jpeg" alt="Ostrich" name="bird">

Supported Browsers

Attribute
name Yes Yes Yes Yes Yes

10. size attribute

Explaination: The size attribute specifies the different image sizes for the different display-size.

Supported Browsers

Attribute
size Yes Yes Yes Yes Yes

11. src attribute

Explaination: The src attribute specifies the URL of the image.
The value of the URL might be within the current server or domain, or another server.
This attribute is mandatory or required for any image to be inserted into a web-page.

Syntax:

<img src="URL">

Example:

<img src="ostrich.jpeg">
<img src="http://www.myhtml5tutorials/images/ostrich.jpeg">

Supported Browsers

Attribute
src Yes Yes Yes Yes Yes
Attribute values
Value Type Notes
src Absolute It specifies the URL of the image file contained on another web site
Eg:- src="http://www.someone.com/image_name.jpg"
Relative It specifies the URL of the image file contained within the current server or website or domain.
Eg:-
src="/images/example.jpg" or src="example.jpg"

12. srcset attribute

Explaination: The srcset attribute specifies the URL of a set of image for the user agent to use.

Supported Browsers

Attribute
srcset 34.0 or higher Not supported 38.0 or higher 8.0 or higher 21.0 or higher

13. usemap attribute

Explaination: The usemap attribute specifies a mapname(starting with "#") which is to be similar with the name attribute of the <map> element.
It is used in giving an image-map within an image which allows a clickable link.
This attribute must be used only after <img> element.

Syntax:

<img usemap="#mapname">

Example:

<img src="map.jpeg"alt="Ostrich" usemap="#demo">
<map name="demo">
<area shape="rect" coords="47,68,220,150" href="rectangle.html" target="_blank" alt="rectangle" download>
<area shape="circle" coords="373,107,52" href="circle.html" target="_blank" alt="Circle" download="RedCircle">
</map>

Supported Browsers

Attribute
usemap Yes Yes Yes Yes Yes

14. vspace attribute

Explaination: The vspace attribute specifies the number of space(white-space) on both top and bottom side of an image.
It is not supported in HTML5.Use the margin CSS property to give space around an image like
<img style="margin:20px 0px" src="ostrich.jpg">.

Syntax:

<img vspace="pixels">

Example:

<img src="ostrich.jpeg" height="222" width="504" alt="Ostrich" vspace="20">

Supported Browsers

Attribute
vspace Yes Yes Yes Yes Yes

15. width attribute

Explaination: The width attribute defines the width of an image, in pixels.
At least, the width attribute must be associated with the height attribute. In HTML5, the value of height and width attribute must be in pixels.

Syntax:

<img width="pixels">

Example:

<img src="ostrich.jpeg" height="222" width="504" alt="Ostrich">

Supported Browsers

Attribute
width Yes Yes Yes Yes Yes