HTML Images

By /

A webpage looks much better when it has images. You can use images to show people, places, products, animals, logos, or anything else. In HTML, we use the <img> element to add an image to a webpage. Let’s start HTML images with a simple example.

Adding an Image

The basic syntax is:

<img src="image.jpg" alt="Description of image">

Here:

  • <img> tells HTML to add an image.
  • src tells the browser which image to show.
  • alt gives a short description of the image.

Unlike most HTML elements, <img> does not need a closing tag.

Your First Image

Suppose you have an image named cat.jpg in the same folder as your HTML file.

<!DOCTYPE html>
<html>
<head>
    <title>My Image</title>
</head>
<body>

    <h1>My Cat</h1>

    <img src="cat.jpg" alt="A cute cat">

</body>
</html>

Output

My Cat

[Your cat image appears here]

The actual image will appear when cat.jpg is available in the same folder.

Understanding src

src stands for source. It tells the browser where to find the image.

For example:

<img src="cat.jpg" alt="A cute cat">

The browser looks for cat.jpg. If your image is inside an images folder:

<img src="images/cat.jpg" alt="A cute cat">

So the src value should match the location and name of your image.

Understanding alt

alt stands for alternative text. It describes the image in words.

<img src="cat.jpg" alt="A cute white cat">

The alt text is useful when the image cannot be displayed. It also helps people who use screen readers understand what the image is about. Try to describe the image clearly instead of writing something random.

Changing Image Size

You can use width and height to control the size of an image.

<!DOCTYPE html>
<html>
<head>
    <title>Image Size</title>
</head>
<body>

    <h1>My Cat</h1>

    <img src="cat.jpg" alt="A cute cat" width="300" height="200">

</body>
</html>

Output

My Cat

[Cat image displayed at 300 × 200 pixels]

Here:

  • width="300" sets the image width.
  • height="200" sets the image height.

Using an Image from a Folder

Keeping images in a separate folder makes your website easier to organize.

For example:

my-website/
│
├── index.html
│
└── images/
    └── cat.jpg

Now your HTML should use:

<img src="images/cat.jpg" alt="A cute cat">

The browser goes into the images folder and looks for cat.jpg.

What If the Image Does Not Appear?

If you see a broken image instead of your picture, check these things:

  • Is the image name correct?
  • Is the file extension correct, such as .jpg or .png?
  • Is the image in the correct folder?
  • Did you write the path correctly?
  • Check capital letters in the filename.

For example, these may be treated as different filenames:

 cat.jpg
Cat.jpg
CAT.jpg

So make sure the path exactly matches your file.

A Small Example

Let’s put the important things together.

<!DOCTYPE html>
<html>
<head>
    <title>My Favorite Animal</title>
</head>
<body>

    <h1>My Favorite Animal</h1>

    <img src="images/dog.jpg"
         alt="A happy dog"
         width="300">

    <p>I really like dogs because they are friendly and playful.</p>

</body>
</html>

Output

My Favorite Animal

[Dog image displayed at 300 pixels wide]

I really like dogs because they are friendly and playful. This is the basic idea of adding images to a webpage. Once you understand src, alt, and image paths, you can start adding your own pictures to your websites.

Quick Recap

  • <img> is used to add an image.
  • src tells HTML where the image is.
  • alt describes the image.
  • width and height control the image size.
  • Images can be kept inside separate folders.
  • An image can also be made clickable using <a>.

Frequently Asked Questions (FAQs)

Q1. What is HTML Images?

HTML Images allow you to add pictures such as photos, logos, animals, and products to a webpage. The <img> tag is used to display an image in HTML.

Q2. How do you add an image in HTML?

To add an image in HTML, use the <img> tag with the src attribute. For example, <img src="cat.jpg" alt="A cute cat"> displays the image named cat.jpg.

Q3. What is the <img> tag in HTML?

The <img> tag is used to display an image on a webpage. It uses attributes such as src to locate the image and alt to describe it.

Q4. What is the src attribute in an HTML image?

The src attribute tells the browser where to find the image file. The path should match the image’s actual name and location.

Q5. Why is alt used in HTML images?

The alt attribute provides a text description of an image. It is useful when an image cannot load and also helps screen readers understand the image.

Q6. How can you change the size of an HTML image?

You can use the width and height attributes to set an image’s size. For example, width="300" makes the image 300 pixels wide.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top