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=”” 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="" />

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-favicon

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-favicon

Image aligned  faviconin between the text.

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

Learn more about Target attribute in HTML  Hyperlinks.