Home Blog Contact

Web Design Tutorial — Lesson 19 of 27 [ Updated: 11 Aug 2026 ]

HTML Images (<img>) Explained for Beginners – Complete Guide

Learning Objectives

After completing this tutorial, you will be able to:

  • Add images to an HTML webpage.

  • Understand the <img> element.

  • Use the src attribute correctly.

  • Write useful alt text.

  • Understand basic image file paths.

  • Avoid common image-related mistakes.

Table of Contents

  1. Introduction

  2. What Is the <img> Element?

  3. Your First HTML Image

  4. Understanding src

  5. Understanding alt

  6. Using a Local Image

  7. Image Paths

  8. Controlling Image Size

  9. Making an Image a Link

  10. Best Practices

  11. Common Beginner Mistakes

  12. Practice Exercise

  13. Assignment

  14. Summary

  15. Frequently Asked Questions

  16. Next Tutorial

Introduction

Text and links are important parts of a webpage, but images make websites more visual and engaging.

Think about a portfolio website.

It might contain:

  • A profile photo

  • Project screenshots

  • Product images

  • Blog thumbnails

  • Logos

  • Illustrations

HTML allows you to add all of these using the <img> element.

Unlike headings and paragraphs, images don't contain text between an opening and closing tag.

Instead, the image location is provided using an attribute.

What Is the <img> Element?

The <img> element is used to display an image on a webpage.

Basic syntax:

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

There are two important attributes here:

src → tells the browser where the image is

alt → describes the image

The <img> element is a void element, so it does not require a closing tag.

Do not write:

</img>

Your First HTML Image

Let's assume you have an image called:

profile.jpg

inside your project folder.

Your project might look like this:

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

Now add this code inside <body>:

<h1>My Portfolio</h1>

<img src="profile.jpg" alt="My profile photo">

Save the HTML file and refresh the browser.

If the image is in the correct location, it will appear on your webpage.

Understanding src

The src attribute tells the browser where to find the image.

For example:

<img src="profile.jpg" alt="Profile photo">

Here:

src = profile.jpg

The browser looks for a file named profile.jpg.

If the file exists in the correct location, the browser displays it.

Understanding alt

The alt attribute provides alternative text for the image.

Example:

<img src="mountain.jpg" alt="Snow-covered mountain">

The alt text is useful when:

  • The image cannot load.

  • A visitor uses a screen reader.

  • The image needs a text alternative.

Good alt text should describe the actual purpose or content of the image.

For example:

<img src="laptop.jpg" alt="Laptop displaying a web design project">

This is much more useful than:

<img src="laptop.jpg" alt="image">

Using a Local Image

Most websites store their images inside a separate folder.

For example:

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

Now the image path changes.

You need to tell the browser to enter the images folder.

<img src="images/profile.jpg" alt="Profile photo">

The path means:

images/
   ↓
profile.jpg

This concept of file paths will become extremely important as your projects become larger.

Image Paths

Suppose your project looks like this:

website/
│
├── index.html
│
├── about.html
│
└── images/
    └── logo.png

From index.html, use:

<img src="images/logo.png" alt="Website logo">

If about.html is also in the same folder, it can use the same path:

<img src="images/logo.png" alt="Website logo">

The path is based on the location of the HTML file.

Controlling Image Size

You can specify image dimensions using width and height attributes.

Example:

<img src="profile.jpg"
     alt="Profile photo"
     width="300"
     height="300">

This tells the browser to display the image at the specified dimensions.

However, in modern web development, CSS is generally preferred for controlling presentation and responsive sizing.

For example, later you'll learn:

img {
    width: 300px;
}

For now, focus on understanding how images work.

Making an Image a Link

You can combine what you learned in the previous tutorial with images.

Place the image inside an <a> element:

<a href="index.html">
    <img src="logo.png" alt="Website logo">
</a>

Now clicking the image takes the visitor to index.html.

This technique is commonly used for website logos.

For example:

<a href="index.html">
    <img src="images/logo.png" alt="IncomeVA homepage">
</a>

Later, you'll use this technique when building professional navigation bars.

Best Practices

Use meaningful alt text

Good:

<img src="team.jpg" alt="Web development team working together">

Avoid:

<img src="team.jpg" alt="photo">

Keep image files organized

Instead of placing dozens of images beside your HTML files, create an images folder.

Example:

website/
├── index.html
├── about.html
└── images/
    ├── logo.png
    ├── profile.jpg
    └── project-1.jpg

This keeps your project clean.

Use appropriate image formats

Common formats include:

  • JPG/JPEG

  • PNG

  • WebP

  • SVG

You'll learn more about image optimization later when we discuss performance and responsive web design.

Common Beginner Mistakes

Mistake 1: Wrong filename

If the actual file is:

profile.jpg

but your code says:

<img src="profile.png" alt="Profile">

the image won't load.

The filename and extension must match.

Mistake 2: Wrong folder path

If the image is inside:

images/profile.jpg

you need:

<img src="images/profile.jpg" alt="Profile">

not:

<img src="profile.jpg" alt="Profile">

Mistake 3: Forgetting alt

Avoid:

<img src="profile.jpg">

Prefer:

<img src="profile.jpg" alt="Profile photo">

Practice Exercise

Create this project structure:

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

Then write:

<h1>My Website</h1>

<img src="images/photo.jpg" alt="A photo for my website">

Open index.html in your browser.

If the image doesn't appear, check:

  1. Filename

  2. File extension

  3. Folder name

  4. Image path

This is an important debugging skill for web developers.

Assignment

Create a simple personal profile page.

Your page should contain:

  • One <h1> heading.

  • One paragraph.

  • One profile image.

  • Proper alt text.

  • One link.

Example structure:

<h1>My Profile</h1>

<img src="images/profile.jpg" alt="My profile photo">

<p>I am learning web design and building my first website.</p>

<a href="about.html">Learn More About Me</a>

Use your own content and image.

Summary

In this tutorial, you learned how to add images to webpages using the <img> element.

You learned:

  • How <img> works.

  • How to use src.

  • Why alt text is important.

  • How to use image folders.

  • How file paths work.

  • How to make an image clickable.

  • How to avoid common image-loading problems.

Images are a major part of modern websites, and you'll use them frequently when building real projects.

Frequently Asked Questions

Does <img> need a closing tag?

No. <img> is a void element.

What does src mean?

src specifies the location or source of the image.

Why is alt important?

It provides a text alternative when an image cannot be displayed and improves accessibility.

Can an image be clickable?

Yes. Place the <img> element inside an <a> element.

Next Tutorial

HTML Lists – Creating Ordered and Unordered Lists

In the next lesson, you'll learn how to organize information using HTML lists. You'll create bullet-point lists with <ul>, numbered lists with <ol>, and individual list items using <li>.

← Previous Next →