How to display images in html document?

How to display images in html document?

using <img> tag we may display the images in the html document
<img> tag is empty, which means that it contains attributes only, and has no closing tag.

There are three image formats usually use on the web page — GIF, JPG and PNG.


<img src=”url” alt=”some_text” width=”100″ height=”100″/>

src – src stands for source, we have to specify the url of the picture in the src attribute, to tell where it is located.

alt – alt attribute provide alternate information about the image , in case the image is not available or deleted.

width and height – we may set the width and height of the image . If we do not set the width and height of the image, the browser will loads the actual size of the image. It will create problem during web page loading.  So it is better to specify the width and height of the image. Width and height can be  mention as pixel or percentage.

Image as a link

<a href=”link”>

<img src=”url” alt=”some_text” width=”100″ height=”100″/>


Using the above code we can add link of another web page in an image.

Image as a button

By using the below code we can add image as a button in a form.

<input type=”image” src=”url” alt=”some_text” width=”48″ height=”48″>

Posted in Html Tagged with: