Inserting an image into any HTML document is a very easy task. To insert an image in HTML we use the <img> tag. The <img> tag is an empty tag, so it does not require an end tag.


How To Insert An Image in HTML ?


The <img> Tag

Technically we cannot insert an image into an HTML document with the help of coding. For this, we use the img tag. With the help of this tag, we link the image with the HTML document. The img tag takes some attributes which we discuss further.


The <img> Tag Attributes

The img tag takes some attributes as follows:


Src

Value : path to the image or external image URL.

Description : In this attribute, we give the path of the image and if the image is taken from elsewhere, then we give its URL.


Alt

Value : some text.

Description : In this attribute, we write alternate text. If for some reason the image is not displayed, then this text appears instead.


Width

Value : pixels like 30px.

Description : With this, we can set the width of the image.


Height

Value : pixels like 30px.

Description : With this, we can set the height of the image.


Title

Value : some text.

Description : With this, we can set the title of the image. We see this when we move the mouse over the image.


How To Insert An Image in HTML ?

To know how to insert an image in HTML, you can see the following example:


<!DOCTYPE html>
<html>
<head>
<title>How To Insert An Image in HTML ?</title>
 </head>
<body>

<img src="example.jpg" alt="Alternate Text" title="Image Title Text" width="200" height="200">

<!-- Instead of width or height attribute we also use style attribute to set the width or height of the image. -->

<img src="example.jpg" alt="Alternate Text" title="Image Title Text" style="width:200px;height:200px;>

</body>
</html> code-box

Summary

In this post we learn how to insert an image in HTML. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post