HTML Image Tag

<img> tag is used to insert an image in the HTML document. <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>

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!

See Also

HTML Form Tags
HTML Page Formating Tags
HTML Other Tags


 
 
SHARE THIS IF YOU LIKE!
submit to reddit

SUBSCRIBE FOR LATEST UPDATES
HAVE WE CONNECTED ON FACEBOOK?
TOP TUTORIALSTOP CODE EXAMPLESTOP LIVE DEMOLINKSSTAY CONNECTED
HTML Tutorial
HTML5 Tutorial
Bootstrap3 Tutorial
Javascript Tutorial
TypeScript Tutorial
AngularJS Tutorial
CSharp Tutorial
PHP Tutorial
Developer Tools
Javascript
AngularJS
Google MAP API V3
ASP.NET
Javascript
AngularJS
Google MAP API V3
Contact Us
Advertise with Us
Privacy Policy
Disclaimer
Stay connected. We actually like you. If you want to get up to the minute updates, then connect with us on your fav below.
 
Twitter   Linkedin   Facebook   Google+    RSS   Pinterest
 
Protected by Copyscape Original Content Checker
 
 
Copyright ©2017 www.techstrikers.com Unauthorized reproduction/replication of any part of this site is prohibited.