HTML Img Tag

HTML Img Tag is used to insert an image in the HTML document. The <img> element has two required attributes src and alt. src refers to the location of the image file and alt refers to the alternative text to the image which will be image's short description.

Supported formats of image

Generally following image formats are supported by user agents, however HTML standard does not specify any such list:

JPEG
GIF
PNG
BMP

Syntax

<form>
	<img src="image link here.." alt="image Name here..">
</form>

HTML Img Tag Example

<!DOCTYPE html>
<html>
<head>
<title>My HTML Image Tag Example</title>
</head>
<body>
<img src="../images/nature.png" alt="Nature">
</body>
</html>

This will produce following result

Image Attributes List

The below table contains Image Attributes and their description which is supported by HTML version.

Attribute Name	Attribute Value	Attribute Description
src	URL	refers to the URL of an image
alt	text	refers to the alternative text to the image which will be image's short description
border	pixels	refers to width of the border around an image
height	pixels	refers to height of the image
width	pixels	refers to width of the image
align	left, middle,right, top, bottom	refers to alignment of the image with respect to its surrounding context
hspace	pixels	refers to the whitespace on left and right side of an image
vspace	pixels	refers to the whitespace on top and bottom side of an image
ismap	ismap	refers to an image as a server side image map
usemap	ismap	refers to an image as a client side image map
longdesc	URL	refers to URL to the document containing long description of an image

Above attributes can be more easily understood by following examples

Border Example

<!DOCTYPE html>
<html>
<head>
<title>My HTML Image Tag Example</title>
</head>
<body>
<img src="../images/nature.png" alt="Nature" border="4">
</body>
</html>

This will produce following result

Height & Width Example

<!DOCTYPE html>
<html>
<head>
<title>My HTML Image Tag Example</title>
</head>
<body>
<img src="../images/nature.png" alt="Nature" height="100" width="100">
</body>
</html>

This will produce following result

Align Example

<!DOCTYPE html>
<html>
<head>
<title>My HTML Image Tag Example</title>
</head>
<body>
Welcome to techstrikers!
<img src="../images/nature.png" alt="Nature" align="middle">
Welcome to techstrikers!
</body>
</html>

This will produce following result

Welcome to techstrikers! Nature

Welcome to techstrikers!

Hspace Example

<!DOCTYPE html>
<html>
<head>
<title>My HTML Image Tag Example</title>
</head>
<body>
Welcome to techstrikers!
<img src="../images/nature.png" alt="Nature" align="middle"  hspace="30">
Welcome to techstrikers!
</body>
</html>

This will produce following result

Welcome to techstrikers! Nature

Welcome to techstrikers!

Vspace Example

<!DOCTYPE html>
<html>
<head>
<title>My HTML Image Tag Example</title>
</head>
<body>
Welcome to techstrikers!
<img src="../images/nature.png" alt="Nature"  vspace="60">
Welcome to techstrikers!
</body>
</html>

This will produce following result

Welcome to techstrikers! Nature

Welcome to techstrikers!

« Previous