HTML – IMAGE TAG

HTML Image tags are useful to place image in a HTML webpage. Images are effective way of engaging audience with the content.

IMAGE TAG

To insert image into webpage we use image tag. “<img xxxx>”

Example:

<img XXXXXXXX>

Wait, where is the end tag or closing tag? What are those xxxx…?

Img tag has no closing tag. If you remember one of the previous article we have discussed, there are certain html tags which has no closing tag. Img tag is one of them.

Now, we are in a new situation. Because if we want to set a text as bold or italic or underlined, we used to put the text in between the tags.

<b>I am bold text</b>

<i>I am italic text</i>

<u>I am underlined text</u>

In such tagging, it is easy for us to inform browser from where to begin and at what point it should end the rendering. But with img tag, there is no closing tag. Another issue with img tag is we are not trying to render out text but we want to place an image file at the place of the image tag.

How can we place an image in HTML Webpage?

To place an image in a html webpage, we use image tag but we are required to change its behaviour. We are required to inform the image tag which image it needs to render. That is, we need to inform the path of the image file to image tag.

How do we inform the path of the image file to the image tag?

By using ‘source’ attribute. Attributes are extra information provided in the open tag to instruct the tag to behave in a certain way. In current scenario, we are required to set the path of the image file. There the tag would be as below.

<img src=”image-file-path”>

Thats it. This will place an image in the html webpage.

What does img tag do in a html webpage?

Img tag with source attribute, places the image file (whose path is set in the source attribute) in the html webpage.

How do we use IMG TAG in html webpages?

Lets take previous webpage example which we have created with headings and sub headings.

<html>

<head>

<title>This is a sample webpage</title>

<meta name=”content” description=”this is a sample webpage for practice purpose.”/>

</head>

<body>

<h1>Popular Fruits Among children</h1>

The following information provides the names of popular fruits among children.

<h2>Apple</h2>

An apple keeps doctor away. Children love apple. Apples are of two types:

<h3>Green Apple</h3>

Children love green apple. Because its bit sour and sweet too.

<h3>Red Apple</h3>

Adult love red apple. Its sweet and very tasty.

<h2>Banana</h2>

Children, adult, old people love banana. Banana are also of two types:

<h3>Green Banana</h3>

Green banana are also loved heavily among banana lovers.

<h3>Yellow banana</h3>

Yellow banana is widely loved around the globe

</body>

</html>

In this webpage, suppose I want to place yellow banana picture just after the ‘<h3>yellow banana</h3>’ element.

Following are the steps: 

  1. Download banana image from internet. And rename the downloaded image to ‘banana’. (Note: keep the image extension as it is. The downloaded image of mine has .jpg extension. I am not going to change this extension. If you are using mac, then this extension must be visible. If you are using windows, then this extension might be hidden.)
  2. Place the renamed downloaded image file in the same directory (Folder) where html file is present. (In my example, my html webpage name is ‘demo.html’). (If your html page is on desktop. Then keep the image also on the desktop.)
  3. Open the html file in a text editor.(right click on the html file and open in a text editor)
  4. Just after ‘<h3>Yellow banana</h3>’, insert the img tag with source attribute and its value. (Here value is the path of the image file. Here path of the image file would be the image name with its extension)

<h2>Banana</h2>

Children, adult, old people love banana. Banana are also of two types:

<h3>Green Banana</h3>

Green banana are also loved heavily among banana lovers.

<h3>Yellow banana</h3>

<img src=”banana.jpg”>

Yellow banana is widely loved around the globe

Save the file and open the file in a browser. You would see following result.

IMG TAG HTML WEBPAGE

 

Note: By default, What ever is the downloaded image size, that image size is going to be rendered in the html webpage.

Note: instead of source, we use ‘src’ in the image tag. SRC -> is known as attribute(source attribute). The file path which we have provided is known as source attribute value.

Note: Attribute values are always kept in between double quote or single quote. (Which ever you prefer).

What would happen, if invalid filename or invalid file path is provided in the source attribute value of img tag?

 

IMG TAG WITH INVALID PATH HTML WEBPAGE

A broken image icon appear as you can see in the above picture. If such icon appears, then you could easily understand the image source attribute value(image file path) is not correct.