Insert Image HTML Tag Using src and alt Attribute

HTML provides an Image tag to create more attractive web pages. In HTML you can use <img> tag to display the images in your web page. But to display the images you must have your own collection to host them along with your whole website. You can also use royalty free images from other online sources. Yahoo Flickr also provides royalty free images having Creative Common’s (CC) License that can be published in your personal pages. HTML image <img> tag accepts the URL of the image using its src attribute to display the image on HTML web page. Alt attribute of image tag <img> allows you o display the information about image in a tooltip when user points the mouse over image. Old HTML markup style allows using the <img> tag without its closing IMG tag but W3C HTML markup validation rules for future XHTML recommends to use the closing tag of HTML image <img /> tag.

HTML Image <img> Tag Attributes

Following are commonly used attributes of Image <img> tag:

1. src: src attribute of <img> tag is the main attribute that take the path or location of the image that is to be displayed. You can pass the online image using http:// domain name /directory (if any)/image name with its proper extension e.g.: ".jpg",".gif",".png". If image is hosted on your server then you can use the following method to set the insert image html tag using src and alt attribute of image tag:
   
   • If image and HTML page both are in the root folder of your web site then you can directly pass the image name along with its proper extension into the src attribute of <img> tag. e.g.:

     <img src="ImageName.jpg" />

   • If image is hosted in the sub folder e.g: images and HTML document is located in the root folder:

     <img src="images/ImageName.jpg" />

   • If image is hosted in sub folder e.g.: images and HTML page is inside other sub folder of root folder e.g.: users:

     <img src="../images/ImageName.jpg" />

   Note in the above example "../" maps the path 1 step above the sub folder "users". Similarly if your HTML document is 2 levels inside the root folder e.g.: users/posts then you can use "../../" to map the path 2 level above the sub directories.
2. alt: alt attributeof HTML image <img> tag provides the feature to display the information about image in a tooltip when user moves mouse over the image. E.g.:

   <img src="ImageName.jpg" alt="This is an example of alt attribute" />

3. title: title attribute of HTML image <img> tag is an alternate to alt attribute. Alt attribute works only in IE whereas title attribute performs the tooltip function in most of the web browsers such as IE, FireFox, Opera etc.

   <img src="ImageName.jpg" title="This is an example of title attribute" />

4. align: align attribute allows the different types of positioning of HTML image tag in the paragraph with content or HTML document. Supported values for align attribute are: left, right, middle, bottom and top.
5. border: border attribute accepts a numeric value that displays the border all around the image. The numeric value works in pixels. New W3C markup rules recommend using style attribute or CSS class to apply the borders.
6. width and height: width and height attribute of image <img> tag defines the height and width of image in pixels. Both attributes accepts the value in numbers.
7. hsapce: hspace attribute of image <img> tag creates horizontal white space margin in pixels on both left and right sides of image. hspace accepts value as numeric and allows to display the image inline with paragraph text with horizontal margin.
8. vspace: vspace attribute of <img> tag is similar to hspace attribute, the difference is vspace creates vertical margin in pixels on both top and bottom sides of an image.

Example of HTML image <img> tag

<img src="images/bunny2.jpg" 
title="bunny 2" 
alt="bunny 2" 
align="left" 
width="150" 
height="113" 
border="3" 
hspace="5" 
vspace="5" />

Continue to next tutorial: Code for HTML Image Link Using Anchor Tag to learn how to create image hyperlink using HTML img and anchor a tag.