HTML Image tag

/

Images are very important to beautify as well as to depicts many concepts on your web page. Its is true that one single image is worth than thuasands of words. So as a Web Developer you should have clear understanding on how to use images in your web pages.

   Insert Image – The <img> Element:

You will insert any image in your web page by using <img> tag. Following is the simple syntax to use this tag.

<img src="image URL" attr_name="attr_value"...more attributes />


width: sets width of the image. This will have a value like 10 or 20%etc.   Image Attributes:
Following are most frequently used attributes for <img> tag.

  • height: sets height of the image. This will have a value like 10 or 20% etc.
  • border: sets a border around the image. This will have a value like 1 or 2 etc.
  • src: specifies URL of the image file.
  • alt: this is an alternate text which will be displayed if image is missing.
  • align: this sets horizontal alignment of the image and takes value either left, right orcenter.
  • valign: this sets vertical alignment of the image and takes value either top, bottom orcenter.
  • hspace: horizontal space around the image. This will have a value like 10 or 20%etc.
  • vspace: vertical space around the image. This will have a value like 10 or 20%etc.
  • name: name of the image with in the document.
  • id: id of the image with in the document.
  • style: this will be used if you are using CSS.
  • title: specifies a text title. The browser, perhaps flashing the title when the mouse passes over the link.

Example:

<!DOCTYPE html>
<html>
<head>
<title>HTML image Tag</title>
</head>
<body>
<img src="http://www.learning4uworld.com/images/html.gif" alt="HTML Tutorial" width="100" height="100" border="2" align="center" title="HTML Tutorial" />
</body>
</html>

 

Global Attributes

This tag supports all the global attributes.

Specific Attributes

The HTML <img> tag also supports following additional attributes:

Attribute Value Description
align top
bottom
middle
left
right		 Deprecated-Specifies the alignment for the image.
alt text Specifies alternate text
border pixels Deprecated – Specifies the width of the image border.
crossoriginhtml-5 anonymous use-credentials It allows images from third-party sites that allow cross-origin access to be reused with canvas.
height pixels or % Specifies the height of the image.
hspace pixels Deprecated – Amount of white space to be inserted to the left and right of the object.
ismap URL Defines the image as a server-side image map.
longdesc text Deprecated-Specifies a URI/URL of a long description – this can elaborate on a shorter description specified with the alt attribute.
src URL the url of an image
usemap #mapname Defines the image as a client-side image map and used alongwith <map> and <area> tags.
vspace pixels Deprecated – Amount of white space to be inserted to the top and bottom of the object.
width pixels or % Sets the width of an image in pixels or in %.