Summary -

In this topic, we described about the below sections -

Images are very useful to present the concepts in a simpler way of representation. HTML Images are used to display images on the pages. HTML Images represented with <img> tag.

The <img> tag is also called as empty tag, which means it will not have any closing tag. The <img> tag can contain only attributes which plays very important role in displaying the image on browser.

Animated images can also display by using same <img> tag. There is no difference in representation of normal images and gif images.

Syntax -

<img src="url" alt="img_text">

The below list of attributes plays key roles in displaying the image on webpage.

  1. Src
  2. Alt
  3. Size
  4. Style

Src Attribute -

Source attribute specifies the URL of the image. In other words, it always provides the information to browser where the current image can be found. This is mandatory attribute to display image.

<img src="url">

Let us assume we have coded image as img.png, the below listed are the different possible scenarios.

  1. Image on the same folder on the same serverEx: <img src="img.png">
  2. Image on different folder at below level on the same serverEx: <img src="subfolder/img.png">
  3. Image on the different folder upper level on the same serverEx: <img src="../upfolder/img.png">
  4. Image on different serverEx: <img src="images/img.png">

Alt Attribute -

The Alt text specifies the alternative text/description. This will display if the specified images failed to load. This text/description can be used in only when the images failed to load due to some connectivity issues or screen reader used. This is mandatory attribute.

Syntax -

<img src="url" alt="img_text">

Let’s take above example to understand the same.

Example -

<img src="Logo.png" alt="Logo Image">

In the above example, the Logo Image will be displayed if the logo.png can’t able to load due to any issue.

Size Attribute -

The Size attribute is a combination of Width and Height. The height is the length in vertical direction. The Width and Height attributes can be used to replace the job of Style attribute.

Syntax -

<img src="logo.png" alt="Logo Image" width="XX" height="YY">

In the above case, pixels are not required along with width and height values. By default, It will take the value as pixels.

Style Attribute -

The style (Size) attribute can be used to specify the width and height of the image. This is an optional attribute. If the Size attribute not provided, browser will calculate the size of the image during the run time.

The runtime size calculation may leads to the disturbance in alignments in display. The values can be specified in pixels (px).

Syntax -

<img src="logo.png" alt="Logo Image" style="width:XXpx;height:YYpx;">

In the above, the width can be the length of the image in horizontal direction. The height is the length in vertical direction. The Width and Height attributes can be used to replace the job of Style attribute.

Required Attributes -

AttributeDescriptionValues
srcSpecifies the Image location.URL.

Optional Attributes -

AttributeDescriptionValues
alignSpecifies the alignment of the <img>.Not supported in HTML5.LeftRightTopBottom
altSpecifies the alternative text when image tag is not supported by browser or image URL not specified properly.Text
borderSpecifies the border for image.Not supported in HTML5.Number/Pixels
crossoriginUsed to handle Cross Origin Resource Sharing requests. Newly added in HTML5. anonymoususer-credentials
heightSpecifies the height of the imageNumber/Pixels
ismapSpecifies the image used as a server-side image map.None.
longdescSpecifies the source which can describe about the imageURL
usemapSpecifies the image as a server image map name.#mapname
widthSpecifies image width.Number/Pixels

Example -

<!DOCTYPE html>
<html>
	<head>
		<title>Img tag example</title>
	</head>
	<body>
	 	 <header>
   			 <h1>Heading of the document</h1>
   	 		<img src="img/header.png">Logo</img>
  		</header>
	</body>
</html>

Output -

Heading of the document

Project Image