🖼️ Adding Images with <img> - Making Web Pages Visual

📅 August 15, 2025

✍️ By Evans

Hey there, friends! 👋

After learning how to add links with the <a> tag, I wanted to make my pages look a bit more alive. Words are cool, but visuals? They make your page pop! 💥

That's when I learned about the <img> tag — the HTML tag used to add images to a web page.

Let's jump right in! 🖼️

🧱 The Basic Image Tag

Heres the simplest way to add an image in HTML:

<img src="myphoto.jpg" alt="A picture of me learning HTML">
                            

Let's break that down:

• <img> is the tag — and it doesn't need a closing tag!
• src (source) tells the browser where to find the image.
• alt (alternative text) describes the image — super important for accessibility and when the image fails to load.

💡 Example:

If your image doesn't load, the text from alt appears instead. It also helps screen readers describe images to visually-impaired users.

🗂️ Linking to Images in Folders

If your image is inside a folder, you just include the folder name in the path:

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

That tells the browser to look for the image inside the images/ folder

🌍 Using Online Images

You can also add images directly from the internet — just use the full URL:

<img src="https://example.com/pic.jpg" alt="Cool online picture">
                        

⚠️ Be careful though — if that image is deleted or moved, it won't show up on your page anymore.

📏 Setting Image Size

You can control the width and height of images with attributes or, better yet, CSS:

<img src="photo.jpg" alt="Example" width="300" height="200">
                        

But using CSS gives you more flexibility later on:

<img src="photo.jpg" alt="Example" style="width: 300px; height: auto;">
                        

Using height: auto; keeps the image from stretching weirdly. 😅

📌 My Mistakes at First

• ❌ Forgot to put the image in the right folder
• ❌ Misspelled the image name (e.g. Photo.JPG instead of photo.jpg)
• ❌ Didn't add alt, so when the image didn’t load, it just looked broken

🙋‍♂️ Why alt is Important

esides helping with accessibility (for users using screen readers), the alt text also shows when the image can't load.

For example:

<img src="wrongname.jpg" alt="My profile picture">
                        

If the image is missing, users will at least see “My profile picture” instead of nothing.

🖼 My Practice Page

<h1>Welcome to Evans Blog</h1>
<p>Here's a photo from when I started learning HTML:</p>

<img src="images/learning.jpg" alt="Me coding at night" width="400">
                        

🎯 What I Learned

The <img> tag taught me that HTML isn't just about text — it's about visual storytelling. Adding images made my pages feel more real and exciting to look at. It's that “wow” moment when your blank page finally starts to look like a real website. 😍

👉 What's Next?

Next up, I'll be learning about Lists in HTML - Ordered and Unordered Lists.

We'll look at how to organize information neatly using <ul>, <ol>, and <li> tags.

Thanks again for reading, catch you in the next post!

— Evans 📸💻