How to Add Images in HTML: A Beginner's Guide
Images make websites more attractive, engaging, and informative. Whether you're building a personal blog, portfolio, business website, or online store, learning how to add images in HTML is an essential skill for every beginner web developer.
In this guide, you'll learn how to insert images into a webpage using HTML and understand the most important image attributes.
What Is the HTML Image Tag?
HTML uses the <img> tag to display images on a webpage.
Basic syntax:
<img src="image.jpg" alt="Description of the image">
Unlike many HTML tags, the <img> tag does not require a closing tag.
Understanding the Image Tag Attributes
1. src Attribute
The src attribute specifies the location of the image file.
Example:
<img src="photo.jpg" alt="My Photo">
The browser looks for the image file named "photo.jpg" and displays it.
2. alt Attribute
The alt attribute provides alternative text if the image cannot load.
Example:
<img src="phone.jpg" alt="Smartphone Review">
Benefits of using alt text:
Improves accessibility
Helps visually impaired users
Supports SEO
Displays text if the image fails to load
Adding an Image from the Same Folder
If your HTML file and image are in the same folder:
<img src="myimage.jpg" alt="Sample Image">
Folder structure:
project-folder/
│
├── index.html
├── myimage.jpg
Adding an Image from a Different Folder
You can also place images inside an images folder.
Example:
<img src="images/logo.png" alt="Website Logo">
Folder structure:
project-folder/
│
├── index.html
│
└── images/
└── logo.png
Adding an Image from the Internet
You can display an image using its direct URL.
Example:
<img src="https://example.com/image.jpg" alt="Online Image">
The browser downloads and displays the image from that website.
Setting Image Width and Height
You can control image size using width and height attributes.
Example:
<img src="phone.jpg" alt="Smartphone" width="300" height="200">
This displays the image at 300 pixels wide and 200 pixels high.
Making Images Responsive
Responsive images adjust to different screen sizes.
Example:
<img src="phone.jpg" alt="Smartphone" style="max-width:100%; height:auto;">
This ensures the image fits properly on mobile phones, tablets, and desktops.
Creating a Clickable Image
You can turn an image into a link using the anchor tag.
Example:
<a href="https://yourwebsite.com">
<img src="logo.png" alt="Website Logo">
</a>
When users click the image, they are taken to the specified website.
Adding a Caption to an Image
HTML provides the <figure> and <figcaption> elements.
Example:
<figure>
<img src="smartphone.jpg" alt="Smartphone">
<figcaption>Latest Smartphone Review</figcaption>
</figure>
This adds a caption below the image.
Common Mistakes Beginners Make
Incorrect File Name
Wrong:
<img src="photo.png" alt="Photo">
If the file is actually named:
Photo.png
The image may not load because file names are case-sensitive on many servers.
Wrong Folder Path
Incorrect:
<img src="img/photo.jpg">
Correct:
<img src="images/photo.jpg">
Always verify your folder structure.
Missing Alt Text
Bad practice:
<img src="phone.jpg">
Better:
<img src="phone.jpg" alt="Smartphone Review">
Complete Example
<!DOCTYPE html>
<html>
<head>
<title>Adding Images in HTML</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<img src="phone.jpg" alt="Smartphone Review" width="400">
<p>This is an example of an image displayed using HTML.</p>
</body>
</html>
Conclusion
The HTML <img> tag is one of the most commonly used elements in web development. By understanding how to use the src, alt, width, and height attributes, beginners can easily add images to their webpages and create more visually appealing websites.
Practice using images in your HTML projects, and you'll quickly become comfortable building attractive and professional-looking web pages.