Images, SVGs & Alt Text that Doesn’t Suck

Let me be real with you: the first <img> I ever wrote didn’t have an alt attribute. Not because I was being lazy (okay, maybe a little), but because I didn’t get why it mattered. It showed up on the page. Job done, right? Nope. Turns out, images aren't just pixels on the screen—they're part of your content. And when you leave out proper structure or skip alt text, you're shutting out users, breaking accessibility, and killing your SEO. So let’s talk about images that work—for everyone.

The Difference Between Decorative and Informative Images

Not all images are created equal. Some are just eye candy. Others actually mean something. And how you write your HTML should reflect that.

Here’s the basic rule:

• Informative images need meaningful alt text.
• Decorative images need an empty alt="".

If you're using an image to convey info—like a screenshot, a chart, or a product photo—give it a real alt tag. Something that helps a screen reader describe the image in context.

          <img src="project-screenshot.png" alt="Screenshot of a weather app showing current forecast and 7-day outlook">
        

But if it’s just a background flourish or a logo repeated in every corner?

          <img src="decorative-swirl.png" alt="">
        

That tells assistive tech, “Hey, nothing to see here, move along.” And yes, that’s a good thing.

Want a deep dive on alt text from people who live and breathe accessibility? Check out WebAIM’s guide to alt text ↗ —it’s gold.

SVGs: The Cool Kid’s PNG

Raster images like .png and .jpg are like printed photos—you scale them up, they get blurry. SVGs? They’re vectors. Code-based. Infinitely scalable. Crystal-clear. You want your logo to look razor-sharp on a 4K monitor? Use an SVG.

Here’s a quick SVG embed:

          <img src="logo.svg" alt="JSBites logo">
        

Even better? You can inline the SVG directly into your HTML. That gives you more styling and scripting control—but that’s a deeper topic for when we hit CSS and JS.

One tip: if your SVG is decorative, follow the same rule as before—either give it alt="" or use role="presentation" when inlined.

The Projects Page Begins: Show Off with Style (but not yet CSS)

Okay, it’s time. We’re building your Projects page. You’ve already got your homepage and about section. Now let’s start showing off.

Here's a starter layout. We’ll keep it minimal for now—no CSS yet, just clean, semantic HTML.

          <main>
  <section id="projects">
    <h1>Projects</h1>

    <figure>
      <img src="weather-app.png" alt="Screenshot of my weather forecast web app">
      <figcaption>Weather App: Real-time forecasts with a 7-day outlook.</figcaption>
    </figure>

    <figure>
      <img src="todo-app.png" alt="Screenshot of my to-do list app with drag-and-drop">
      <figcaption>To-Do List: Task management made simple (and drag-and-droppable).</figcaption>
    </figure>

  </section>
</main>
        

We’re using <figure> and <figcaption> to tie the image and its description together. That’s semantic. That’s accessible. That’s solid HTML.

Later on, we’ll make this layout look beautiful with flex, grid, and some subtle hover effects. But for now? It’s about the bones.

What’s Next?

Images are only part of the story. What really connects the web? Links. Buttons. Actual interactivity—without jumping into JavaScript just yet. Next up, we’ll dive into smart navigation using <a>, when a <button> is actually the right call, and why not everything needs a framework. Head to Linking It All Together: `<a>`, Buttons & When JS Isn’t Necessary.