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-
<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- ![]()
Image aligned
in between the text.
Note: The target can be set to "_blank" "_self" etc.
Learn more about Target attribute in HTML Hyperlinks.
