Ever wondered how websites display those beautiful images?
You’re in the right place! In this guide, I’ll walk you through how to add images in HTML5 like a pro – even if you’re just getting started.
Let’s dive in!
Why Should You Learn to Add Images in HTML?
Adding images is one of the most essential HTML skills. Whether you’re building a personal blog, a portfolio, or an online store – images make everything pop.
Here’s what you’ll learn today:
- How to use the
<img>tag in HTML5 - Best practices to make your images SEO-friendly
- How to make images responsive (mobile-friendly)
- Common mistakes to avoid
The Basic Syntax
The image element in HTML5 is simple but powerful.
<img src="https://picsum.photos/500" alt="Random Image">Code language: HTML, XML (xml)Let’s break it down:
<img>– This is the tag used to insert an image.src– Short for source, this tells the browser where the image is located.alt– This is alternative text that describes the image (important for SEO and accessibility).
✅ Pro Tip: Always use the
altattribute – it helps with Google rankings and screen readers!
Example: Adding an Image
Here’s how a complete example looks inside an HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Example</title>
</head>
<body>
<h1>My First Image</h1>
<img src="https://picsum.photos/600" alt="A Random Sample Image">
</body>
</html>
Code language: HTML, XML (xml)Local vs Online Images
You can either use:
1. Online Images
Like this:
<img src="https://picsum.photos/400" alt="Online Image">Code language: HTML, XML (xml)2. Local Images
Store the image in your project folder:
<img src="images/cat.png" alt="A cute cat">Code language: HTML, XML (xml)Make sure the image is in the right folder!
Image Attributes You Should Know
Here are some handy attributes:
widthandheight<img src="pic.jpg" width="300" height="200" alt="Example">loading="lazy"– improves page speed<img src="pic.jpg" loading="lazy" alt="Lazy loaded image">title="tooltip text"– adds a hover tooltip<img src="pic.jpg" title="This is a cat!" alt="Cat">
Making Images Responsive
In today’s mobile-first world, responsive images are a must.
Use CSS like this:
<style>
img {
max-width: 100%;
height: auto;
}
</style>
Code language: HTML, XML (xml)This ensures your image scales properly on all devices.
💡 Need help with responsive designs?
Check out my Responsive Web Design Course – it’s perfect for beginners.
Common Mistakes to Avoid
- ❌ Missing
alttext - ❌ Using huge image files (slow loading)
- ❌ Incorrect path (check folder names!)
- ❌ Not optimizing images (use tools like tinypng.com)
Bonus: Add Icons with HTML
Want to use icons along with images?
Try Iconoir – a clean, open-source icon pack.
Example:
<img src="https://iconoir.com/icons/upload.svg" alt="Upload Icon">Code language: HTML, XML (xml)Or use SVG directly in your HTML.
My Personal Tip
When I first started learning HTML, I forgot to close the <img> tag. 😅
Remember – the <img> tag is self-closing, so no need for </img>.
Ready to master HTML completely?
Enroll in the HTML5 & CSS3 Course – it covers everything from basics to layout tricks.
Suggested Learning Paths
If you’re serious about web design and development, here’s what I recommend:
- Absolute Beginners:
- Want to Add More Interactivity?
- Dreaming of a Full Website?
- Planning to Build Projects?
- For E-commerce Goals:
Recap
Here’s what you’ve learned today:
- HTML5
<img>tag syntax - Adding local & online images
- Making images responsive
- SEO-friendly practices
- Common pitfalls
What’s Next?
Now that you know how to add images in HTML5, go ahead and build your first image-based web page!
Don’t stop here. Take the next step and explore my full HTML5, CSS3 & JavaScript Course to level up your skills.
If you found this guide helpful, share it with your friends or students. Let’s make the web beautiful – one image at a time!
Got Questions?
Feel free to comment or reach out through the course Q&A sections.
I’m always happy to help fellow learners.
Discover more from Prime Inspire
Subscribe to get the latest posts sent to your email.
