HTML img tag

HTML Image

Use the HTML img tag to show an image on a web page. HTML’s img tag is an empty tag that only has attributes. HTML’s image element doesn’t use closing tags, so it doesn’t have any.

HTML Images Syntax

The HTML <img> tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web pages. The <img> tag makes a space for the image it points to.

The img> tag is empty because it only has attributes and no closing tag.



<img src=”url alt=”alternatetext>

The img> tag has two attributes that must be used:

src tells the computer where to find the image.
alt: Tells the image what text to use instead.


Let’s look at what an HTML image looks like.

HTML Image Example:

<img src=”imagename.jpg” alt=”Hello Friends”/>

What the HTML img tag can do

The HTML img tag has two important parts: src and alt. Here are all of the attributes of the HTML image tag.

1) src

It is a required attribute that tells where the image came from or what its path is. It tells the browser where on the server to find the picture.

The image could be on the same server or on a different server.

2) alt

If the image can’t be shown, the alt attribute tells the browser what text to show instead. The value of the alt attribute is a list of words that describe the picture. From an SEO point of view, the alt attribute is good.

3) width

It is an optional attribute that lets you choose how wide the image will be. It is not a good idea right now. Instead of the width attribute, you should use CSS.

4) Height

It gives the image’s height. The iframe, image, and object elements can also be used with the height attribute. It is not a good idea right now. Instead of the height attribute, you should use CSS.

Using height and width with the img tag

You now know how to add an image to a web page. If we want to give the image a certain height and width to fit our needs, we can do so with the height and width attributes of the image.


<img src=”E:/images/logo.png  height=”180″ width”300″ alt= “coderazaa logo” />

Alt attribute use

We can use tag’s alt attribute. If the image can’t be shown on the browser, it will show an alternative text. Here’s what the alt attribute looks like:

How to get an image from a different folder or directory?

To add an image to your website, that image needs to be in the same folder as your HTML file. But if the image is in a different directory, you can get to it this way:


<img src=”E:/images/coderazaa-logo.png  height=”180″ width”300″ alt= “coderazaa logo” />


HTML img tag

In the above statement, we put the picture in the local disc D->images->animal.png.

If the src URL is wrong or misspelt, your image won’t show up on the web page. Try to use the right URL.

Use <img> tag as a link

We can also link an image to another page or use an image as a link. Put the img> tag inside the a> tag to do this.

Height and width, or style?

In HTML, width, height, and style are all valid attributes.

But we recommend you use the style attribute. It stops style sheets from making images bigger or smaller:

<!DOCTYPE html>
/* This internal style sets the width of all images to 100%: */
img {
width: 100%;

<h2>Width/Height Attributes or Style?</h2>

<p>The first image uses the width attribute (set to 150 pixels), but in style it sets the width to 100%.</p>

<img src=”/images/coderazaa-logo.png alt=”Image txt” width=”150″ height=”150″>

<p>The second image uses the style attribute to set the width to 150 pixels, this will not be overridden by the style in the head section:</p>

<img src=”/images/coderazaa-logo.png  alt=”Image txt” style=”width:150px;height:150px;”>



Animated Images

HTML lets you create animated GIFs:

<img src=”image.gif” alt=”Image txt” style=”width:150px;height:150px;”>

Formats for most images

Here are the most common image file types that Chrome, Edge, Firefox, Safari, and Opera all support:

Abbreviation File Format File Extension
APNG Animated Portable Network Graphics .apng
GIF Graphics Interchange Format .gif
ICO Microsoft Icon .ico, .cur
JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG Portable Network Graphics .png
SVG Scalable Vector Graphics .svg

Summary of the Chapter

  • Use the <img> element of HTML to specify an image.
  • Use the src attribute of HTML to set the image’s URL.
  • Use the HTML alt attribute to set an image’s alternative text if it can’t be shown.
  • You can set the size of the image using the HTML width and height attributes or the CSS width and height properties.
  • You can let the image float to the left or right by using the CSS float property.
  • Large images take time to load, which can slow down your website. Be careful with images.
People also search
Scroll to Top