HTML Image Tag

Inserting Image im HTML Page

In this tutorials you learn how you can add an image in your webpage. The image is a separate file and we make this file as part of our webpage so user can view this image in web browser.
For inserting an image in a webpage is possible with image element. Below we discus Image tag and its different attribute.
<img src="image1.jpg">

Image Element Attribute

Source Attribute

The Source attribute " src " is major attribute of image element which tell the browser that where the image file is save.
For example :
<img src=" images/html.gif  ">
will display the image which is store in images folder of root directory.

Size Attribute

The size attributes control the the width and height of the image.
For example:
<img src="image.jpg" width="200" height="150">

Alt and Title Tags Attribute

if you add an image but when user open your webpage and the image source is not found then a blank space display instead of image. So we specify the alternative text which appear in case of image source is not found. This is Alternative text which is define with ALT attribute.
For example
<img src="image.jpg" alt="Picture Not Found">
on the other hand Title attribute specify the tool-tip text. When user move mouse over your image the tool-tp text appear.
For example:
<img src="image.jpg" alt="Picture Not Found" title="Learning">

Border Size Attribute

The border attribute set the border border size around your image. In the following example a 1-pixel border is applied:
<img src="image.jpg" border="1">
Note : - The alt attribute is also an attribute which provide the image title to search engines, when search engine looking for images searching.

Image Align Attribute

Align attribute is used for horizontally alignment of the image. Image elements are aligned to the left by default.
For example :
 <img src="sunset.gif" align="right">