HTML Page Structure

HTML Elements
HTML Attributes


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

Nature

Image Attributes List

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

Attribute NameAttribute ValueAttribute Description
srcURLrefers to the URL of an image
alttextrefers to the alternative text to the image which will be image's short description
borderpixelsrefers to width of the border around an image
heightpixelsrefers to height of the image
widthpixelsrefers to width of the image
alignleft, middle,right, top, bottomrefers to alignment of the image with respect to its surrounding context
hspacepixelsrefers to the whitespace on left and right side of an image
vspacepixelsrefers to the whitespace on top and bottom side of an image
ismapismaprefers to an image as a server side image map
usemapismaprefers to an image as a client side image map
longdescURLrefers 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

Nature

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

Nature

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!