HTML Images

HTML Images are very important to beautify as well as to depict many complex concepts in simple way on your web page. This tutorial will take you through simple steps to use images in your web pages.

HTML <img> tag is used to display image on the web page. HTML <img> tag is an empty tag that contains attributes only, closing tags are not used in HTML image element.

Let's see an example of HTML image.

<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<img src ="good_morning.jpg" alt ="Good Morning Friends" />
</body>
</html>
Try it with the Editor

You can use PNG, JPEG or GIF image file based on your comfort but make sure you specify correct image file name in src attribute. Image name is always case sensitive.

The alt attribute is a mandatory attribute which specifies an alternate text for an image, if the image cannot be displayed.

Attributes of HTML img tag

The src and alt are important attributes of HTML <img> tag. All attributes of HTML images are given below.

src

It is a necessary attribute that describes the source or path of the image. It instructs the browser where to look for the image on the server.

The location of image may be on the same directory or another server.

alt

The alt attribute defines an alternate text for the image, if it can't be displayed. The value of the alt attribute describe the image in words. The alt attribute is considered good for SEO prospective.

height

It specifies the height of the image.

width

It is used to specify the width to display the image.

align

Specifies the alignment of an image according to surrounding elements.

border

Specifies the width of the border around an image.