HTML Image Tag



To insert images in a webpage < img> tag is used in HTML. 

HTML <img> tag And Src Attribute 

Images are inserted into our HTML docs using the <img> tag. The <img> tag contains "src" and "alt" attribute. Src stands for source of the image i.e.the url(uniform resource locator) of the image.URL points to the location of the image.

Implementing the <img> tag

Here is the code:

<img src="http://programmingbulls.com/logo.gif" alt="logo.gif" />  

Note:The < img> tag does not require a closing.

Tip:Alt attribute specifies alternative text,it is loaded before the image is loaded. It provides alternative information for

an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute etc).

Height And Width Attribute Of Image Tag

Despite the Src attribute we also need to specify the height and width of the image.At the time of loading the page the browser requires these attributes so that it can specify a place for the image otherwise it affects the layout of the page.   <img width="50" height="30" alt="" src="http://programmingbulls.com/images/logo.jpg" />  

Using Image As Link In HTML

We can use an image as a link on a page to direct a visitor to our webpage.Here is an example: Click on the following image and it will take you to the homepage of the site-wesite logo

<a href="http://programmingbulls.com">   <img width="30" height="30" src="http://programmingbulls.com/images/logo.jpg" alt="website logo" /></a>  

Image Alignment In HTML

We can align our image Vertical(top, bottom,centre) and horizontal(left,right,middle) according to our requirements using the align attribute.

Image aligned to the right of text- website logo

Image aligned website logo in between the text.

Note: The target can be set to "_blank" "_self" etc.

Learn more about Target attribute in HTML  Hyperlinks.