Imagine you’re scrolling through a website, and all you see is wall-to-wall text. No photos, no illustrations, just words. Pretty boring, right? It’s like a museum without any paintings. That’s why images are such a vital part of the web. They tell stories, set moods, and make ideas click instantly. So, how do we add these visual elements to our own web pages? It all comes down to a simple, powerful piece of HTML: the image element.
Let’s meet the <img> tag. At its heart, it’s beautifully straightforward. Here’s what it looks like in its most basic form:
<img src="url" /> See? Not too scary. You’ll notice it looks a bit like the anchor tag (<a>) we learned about before. The magic happens inside that src attribute—short for "source." This attribute’s job is to tell the browser, "Hey, go find the picture that lives at this address." You simply put the location (the URL) of your image right after the equals sign, inside the quotes.
Now, there's one key thing that makes the <img> tag different from elements like paragraphs or headings. It doesn’t have a closing tag </img>. Instead, it’s a self-closing tag, also known as a void element. Think back to other void elements we’ve met, like the horizontal rule (<hr>) or the line break (<br>). The image tag joins that club. It makes sense if you think about it—what would the text content inside an image tag even be? The real content is the visual file we’re pulling in from the source.
Let’s See It in Action Here’s a real example you can try:
<img src="https://picsum.photos/200/200" /> When your browser reads this code, it will fetch and display a random 200-pixel by 200-pixel image. In my case, I got a lovely photo of a forest. Why random? Because I’m using a fantastic service called picsum.photos. It’s like "Lorem Ipsum" but for placeholder images. When you’re building a site and just need any image to see how things will look, you can use a URL from this site. The /200/200 part defines the width and height. It’s a huge help during the design phase.
The Most Important Attribute You Might Forget But wait, we’re not done. There’s another attribute that is absolutely non-negotiable for good, responsible web development: the alt attribute. "Alt" stands for Alternative Text Description.
Why does this matter so much? People who are blind or visually impaired often browse the web using screen readers—software that reads the content of a page out loud. When that screen reader hits an image, what should it say? It looks at the alt text. So, for our forest image, a good alt text might be:
<img src="https://picsum.photos/200/200" alt="A sunlit forest with dense green trees" /> Now, a screen reader will describe that scene, allowing someone who can’t see the image to understand its role on the page. It transforms a silent, invisible graphic into meaningful information.
To give you a real sense of this, there’s a great browser tool called the Silktide Toolbar (a free Chrome extension) that simulates this experience. For instance, on a news site like the BBC, if you hover over an image of a dolphin leaping from the sea, the screen reader voice will say exactly that: "Dolphin leaping from the sea – Image." Where did it get that? If you inspect the element, you’d find the alt="Dolphin leaping from the sea" tucked right into the image tag. That’s the power of a few thoughtful words. It’s not about the specific tool; it’s about understanding how critical your alt text is for accessibility.
Your Turn: A Quick Challenge Let’s put this into practice. Imagine you’re creating a simple page to declare if you’re a cat person or a dog person. Your tasks:
- Create an
<h1>that says either "I'm a cat person." or "I'm a dog person." - Right below it, add an
<img>tag.
You can use these URLs:
- Dog:
https://i.imgur.com/6MPhqjX.gif - Cat:
https://i.imgur.com/rzo8XJo.jpeg
Go ahead, try it! Pause here and give it a shot in your own code editor.
… Alright, welcome back! Personally, I’m a dog person. If you are too, you might have seen my little Easter egg. Here’s how my code looks:
<h1>I'm a dog person.</h1> <img src="https://i.imgur.com/6MPhqjX.gif" /> If I open a preview, I see a delightful little GIF of a puppy digging happily in the sand. See that? GIFs work just like JPEGs or PNGs—the browser handles them all. If you chose the cat, you’d get a chill, static JPEG. Both are perfect!
But we have one final, crucial step. Remember our friend, the alt attribute. Let’s add it.
<img src="https://i.imgur.com/6MPhqjX.gif" alt="A small puppy digging energetically in sandy soil" /> Visually, nothing changes for us on the page. But behind the scenes, we’ve just made our website more welcoming and understandable for everyone. That’s a win.
Your Immediate Takeaway The next time you drop an image into your HTML, make this your two-step ritual:
- Write the tag:
<img src="your-image-url" /> - Pause, and add the alt text. Ask yourself: "What’s the simplest, kindest description of what’s here?" If it’s a decorative image that doesn’t add meaning, you can use
alt=""(an empty string), but when in doubt, describe.
Mastering the humble <img> tag is about more than just showing a picture. It’s about choosing what to show and ensuring you’re describing it for all your visitors. With that skill in your toolkit, you’re ready to build richer, more engaging, and more inclusive web pages. Now, let’s take all these skills and build something fun!
Comments
Post a Comment