Text is great, but let’s be real — pictures make a webpage pop. Whether it’s a cute cat, a logo, or a meme, HTML’s <img> tag is how you bring images into the mix. It’s one of those tags that feels like magic the first time you see it work, and it’s crazy easy to use. Let’s jump in!

Here’s the basic setup:

That src (source) bit tells the browser where your image lives — like “cat.jpg” if it’s in the same folder as your HTML file. The alt part? That’s a little backup text — if the image doesn’t load, or for folks using screen readers, it says “A fluffy cat” instead. Load that, and boom, your cat’s on the page!

I’ve tinkered with this a bunch. You can grab images from the web too:

Just make sure you’ve got permission to use it — nobody likes a copyright snag. If it’s your own file, keep the path right — like src="images/puppy.jpg" if it’s in a subfolder called “images". I messed that up once, and all I got was a broken icon. Oops!

Want to tweak it? Add some attributes:

1. width="200": Shrinks or stretches it to 200 pixels wide.
2. height="150": Sets the height (play with both for size).

So:

That’ll show your sunset at a custom size — handy for fitting your layout.

Here’s a real combo I’ve tried:

It’s chill next to the text, like a little postcard. One thing I learned: always use alt — it’s a small step that makes your page friendlier to everyone. Next time you’re coding, grab a pic you love and slap it in with <img>. It’s like decorating your digital room!