HTML – Image tag


What is HTML image tag?

HTML <img> tag is used to display image on the web page.

Inserting images in the webpage improves the design and the appearance of a web page.

What are the attributes used for image tag?

There are four attributes used for image tag, listed below

1. src

2. alt

3. width

4. height

1. src

src attribute describes the source or path of the image.

This instructs the browser where to look for the image on the server.

2. alt

alt attribute defines an alternate text for the image.

alt attribute “value” describes the image in words.


alt attribute “value” is mainly used in SEO prospective, which will be discussed later.

alt attribute is optional param.

3. width

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

width attribute is optional param.

4. height

height attribute is used to specify the height to display the image.

Usually this takes the height of <h3> as default.

Learn html for beginners !!!

Click to Learn More about – HTML Tutorial for beginners

How to insert an image in webpage ?

There are three ways to insert image in webpage, listed below

1. Insert image directly from the same folder.

2. Insert image from any of the sub-folder.

3. Insert image from server or website.

1. Simple image insert with src attribute

Example :

<!DOCTYPE html>
<html>
        <head>
                <title>Image tag</title>
        </head>
        <body>
                <img src="html-icon-copyright-img-frontpage.png">
        </body>
        </html>

Output :


2. Insert image with other attributes / Insert image directly from the same folder.

Example :

<!DOCTYPE html>
<html>
        <head>
                <title>Image tag</title>
        </head>
        <body>
                <img src="html-icon-copyright-img-frontpage.png" alt="HTML Topics Tutorials" width="200px" height="400px">
        </body>
        </html>

Output :

3. Insert image from any of the sub-folder.

Example :

<!DOCTYPE html>
<html>
        <head>
                <title>Image tag</title>
        </head>
        <body>
                <img src="../images/html-icon-copyright-img-frontpage.png" alt="HTML Topics Tutorials" width="200px" height="400px">
        </body>
        </html>

Output :

Basic html tutorial !!!

Click to Learn More about – HTML Tutorial for beginners

4. Insert image from server or website.

Example :

<!DOCTYPE html>
<html>
        <head>
                <title>Image tag</title>
        </head>
        <body>
                <img src="https://secureservercdn.net/192.169.221.188/s30.e0b.myftpupload.com/wp-content/uploads/2020/06/core-java-copyright-img-1.png" alt="Core Java Topics Tutorials" width="200px" height="400px">
        </body>
        </html>

Output :