Alt Text For Images in HTML

You added an image to your webpage. It looks great visually. But here’s a question worth thinking about: what happens when someone who is blind visits that page? Or when Google’s crawler tries to understand what that image is about? Or when the image just fails to load?

That’s exactly where alt text for images steps in, and honestly, it’s one of those small HTML details that has a surprisingly big impact. It touches accessibility, SEO, and just plain good web development practice, all at once.

In this tutorial, we’re going to go deep on this topic. Not just “add alt text to your images” and move on. We’ll look at how to write it well, when to leave it empty on purpose, how screen readers actually use it, what Google thinks about it, and how to handle different types of images the right way.

Let’s start!

01What Is Alt Text For Images, Exactly?

Alt text is a short piece of text you attach to an image using the alt attribute inside an <img> tag. The word “alt” stands for alternative, which already tells you the story: it’s the alternative to the image when the image itself can’t be experienced.

Here’s the simplest possible example:

<img src="dog.jpg" alt="A golden retriever sitting on green grass">

That’s it. The alt attribute holds a text description of what the image shows.

Now, this text shows up in three real-world situations:

All three of these matter. Let’s explore each one properly as we go through the article.

02The HTML Alt Attribute: Basic Syntax and Where It Lives

If you’ve already gone through our guide on mastering images in HTML5, you know that the <img> tag is a self-closing (void) element. The alt attribute sits right inside it, alongside src, width, and height.

<!-- Full img tag with alt, width, and height -->
<img 
  src="https://daniyaldev.com/wp-content/uploads/2026/01/social-share-scaled.png" 
  alt="DaniyalDev website social share banner showing web development tutorials"
  width="800"
  height="400"
>

The alt attribute is not optional. Technically, HTML will not throw an error if you skip it, but leaving it out is considered a markup error by the W3C Web Accessibility Initiative and will cause accessibility validators to flag your page. Every single <img> element should have an alt attribute, even if its value is empty (more on that in a bit).

Here’s a quick comparison so you can see the difference clearly:

<!-- ❌ Missing alt attribute entirely - don't do this -->
<img src="profile.jpg">

<!-- ✅ Has alt text describing the image -->
<img src="profile.jpg" alt="Maria, a web developer, smiling at her desk">

<!-- ✅ Intentionally empty alt for decorative images (explained later) -->
<img src="divider-line.png" alt="">

That middle example is the standard. The bottom one is intentional and valid. The top one is a problem. Keep this in mind as we move forward.

03How to Write Good Alt Text For Images: The Real Guidelines

Here’s where most tutorials rush through things, and that’s a shame because this is the part that actually matters in practice. Writing good alt text for images is a skill. It’s not complicated, but there’s a real art to it.

1. Describe What’s Actually in the Image

Your job is to describe what a sighted person would see. Be specific, but keep it tight. You’re not writing a novel, but you’re also not writing “image” or “photo.”

See the difference? The good examples are specific. They give the reader (or screen reader user) a mental picture of what’s actually there.

2. Don’t Start With “Image of” or “Photo of”

Screen readers already announce that it’s an image before reading the alt text. So if you write alt="Photo of a cat sleeping", the user actually hears: “Image, Photo of a cat sleeping.” That’s redundant and a little awkward.

Just say: alt="A cat sleeping on a windowsill in afternoon sunlight"

3. Think About Context, Not Just Content

This one is really important and often missed. The same image can need different alt text depending on where it’s used.

<!-- Same image, different contexts -->

<!-- Used in an article about dog breeds -->
<img src="golden-retriever.jpg" alt="Golden Retriever puppy, approximately 8 weeks old, with light cream fur">

<!-- Used in an article about summer activities -->
<img src="golden-retriever.jpg" alt="A puppy playing fetch on a sunny beach">

<!-- Used as a decorative background element -->
<img src="golden-retriever.jpg" alt="">

Same image. Three different alt texts. Because the context changed, what matters about the image changed too. That’s smart alt text writing.

4. Keep It Reasonably Short

There’s no official character limit, but a good rule of thumb is to aim for under 125 characters. Screen readers often pause or cut off at around that length. If your image is complex (like a detailed infographic or chart), you can use a longer description technique, which we’ll cover shortly.

04Alt Text in HTML and How Screen Readers Actually Use It

Let me paint a real picture here. Imagine you’re a blind user navigating a webpage with a screen reader like NVDA or JAWS. The software reads every element on the page out loud to you. When it hits an image, here’s what happens:

This is why alt text for images is genuinely important. It’s not bureaucratic box-ticking. A screen reader user’s entire experience of your page can be significantly better or worse depending on how carefully you’ve written these few words.

If you’ve been reading our earlier articles, you already know that semantic HTML, proper heading structure, and good navigation patterns all help screen reader users. Alt text is another piece of that same puzzle. It’s all part of building a page that actually works for everyone.

05The SEO Benefits of the HTML Alt Attribute

Now let’s talk about something that most developers and content creators are very motivated by: search engine rankings.

Here’s the honest truth: Google cannot “see” images the way you do. It processes your HTML, reads the text, follows the links, and uses every text signal it can find. The HTML alt attribute is one of those key signals. It tells Google what your image depicts.

This matters for two reasons:

1. Google Image Search rankings. When someone searches for “golden retriever puppy” in Google Images, Google shows images it has indexed and understood. If your image has a clear, descriptive alt text, it has a much better chance of appearing in those results and sending traffic to your site.

2. Page relevance signals. Your alt text contributes to the overall topic relevance of your page. If you’re writing a tutorial about CSS flexbox and your images have descriptive alt text mentioning “CSS flexbox layout” and “flex container example,” that reinforces to Google what your page is about.

That said, a word of caution here:

Here’s a before and after that shows the right approach:

<!-- ❌ Keyword stuffing - hurts more than it helps -->
<img src="code-editor.png" alt="HTML code HTML tutorial HTML beginner HTML website HTML tips">

<!-- ✅ Natural, descriptive, and still keyword-relevant -->
<img src="code-editor.png" alt="HTML code example showing an anchor tag in VS Code editor">

The second one is accurate, useful, and naturally contains a relevant keyword. That’s the sweet spot. Write good alt text consistently and the SEO benefits follow naturally.

06Decorative Images and the Empty Alt Attribute

Not every image on a webpage conveys information. Some images are purely visual decoration: divider lines, background patterns, abstract shapes, icon flourishes, and so on. These images don’t need to be read out by a screen reader, and they have nothing useful to tell a search engine either.

For these images, the correct approach is to include the alt attribute but leave its value empty:

<!-- Decorative images should have empty alt -->
<img src="decorative-wave.svg" alt="">
<img src="background-pattern.png" alt="">
<img src="section-divider.png" alt="">

Notice: this is not the same as leaving out the alt attribute entirely. When alt="" is present with an empty value, the screen reader knows to skip the image completely. That’s the intended behavior. When the alt attribute is missing, the screen reader may read the filename instead, which is a bad experience.

If you’re ever unsure which category an image falls into, ask yourself: If I removed this image, would anyone miss information? If the answer is yes, it’s informative and needs descriptive alt text. If no, it’s likely decorative.

07Alt Text For Images in Different Situations

Different types of images call for different approaches. Let’s walk through the most common scenarios you’ll actually encounter.

Functional Images: Images Inside Links and Buttons

When an image is the only content inside a link or a button (like a logo that links to the homepage, or a magnifying glass icon on a search button), the alt text should describe the destination or action, not the image itself.

<!-- Logo linking to homepage -->
<a href="/">
  <img src="logo.png" alt="DaniyalDev - Go to homepage">
</a>

<!-- Icon-only button -->
<button>
  <img src="search-icon.png" alt="Search">
</button>

<!-- If the link has both an image AND text, use empty alt -->
<a href="/">
  <img src="logo.png" alt="">
  DaniyalDev
</a>

That last example is worth noting. When the link has a text label right next to the image, the screen reader will read the text label. Adding more alt text would create a repeat. So alt="" is the right call there.

Complex Images: Charts, Graphs, and Infographics

Some images carry a lot of information. A detailed chart or infographic can’t be fairly described in 125 characters. Here are two approaches that work well:

<!-- Approach 1: Short alt + longer description in a figcaption -->
<figure>
  <img 
    src="traffic-chart.png" 
    alt="Bar chart showing monthly website traffic growth from January to June 2025"
  >
  <figcaption>
    Monthly traffic grew from 10,000 visitors in January to 45,000 in June 2025,
    with the largest single-month jump (15,000 visitors) happening in April
    after the site's redesign launch.
  </figcaption>
</figure>

<!-- Approach 2: Link to a text alternative -->
<img 
  src="infographic.png" 
  alt="Infographic summarizing the five steps to build an HTML page. See the text version below."
>
<p>
  <a href="#text-version-of-infographic">View full text version of this infographic</a>
</p>

The <figure> and <figcaption> approach is especially elegant here. We’ll cover those elements in detail in an upcoming article in this series, but even at this stage you can start using them this way. The figcaption provides the extended description while the alt text gives a brief summary.

Images With Text Inside Them

If your image contains text (like a promotional banner that says “50% Off This Weekend”), that text needs to be in the alt attribute. Otherwise, screen reader users and search engines will completely miss it.

<!-- Banner with text in the image -->
<img 
  src="promo-banner.png" 
  alt="DaniyalDev Pro Plan - 50% Off This Weekend. Use code LEARN50 at checkout."
>

Include every piece of readable text from the image in the alt text. That said, whenever possible, it’s better to overlay real HTML text on top of images using CSS rather than baking the text into the image file itself. Real HTML text is always more accessible and more SEO-friendly than text inside an image.

08A Full Real-World Example: Alt Text For Images Done Right

Let’s put everything together in a practical scenario. Imagine you’re building an article page about HTML tutorials. Here’s what a well-structured section with properly written alt text in HTML looks like:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Tutorials - DaniyalDev</title>
</head>
<body>

  <!-- Site logo: functional image inside a link -->
  <header>
    <a href="/">
      <img src="logo.png" alt="DaniyalDev - Go to homepage" width="160" height="40">
    </a>
    <!-- Decorative line separator -->
    <img src="header-wave.svg" alt="" width="100%" height="20">
  </header>

  <main>
    <article>
      <h1>Getting Started With HTML Images</h1>

      <!-- Informative image with descriptive alt text -->
      <img 
        src="https://daniyaldev.com/wp-content/uploads/2026/01/social-share-scaled.png"
        alt="DaniyalDev social share image showing the website logo and a dark blue themed background"
        width="800"
        height="400"
      >

      <p>Learning HTML images starts with the img tag...</p>

      <!-- Screenshot: describe what's visible in it -->
      <figure>
        <img 
          src="vs-code-screenshot.png" 
          alt="VS Code editor showing an HTML file with the img tag typed on line 12"
          width="700"
          height="400"
        >
        <figcaption>The img tag in a typical HTML file inside VS Code</figcaption>
      </figure>

      <!-- Chart with complex data -->
      <figure>
        <img 
          src="image-format-comparison.png" 
          alt="Comparison chart showing file size differences between JPEG, PNG, WebP, and AVIF formats for the same image"
          width="600"
          height="350"
        >
        <figcaption>
          WebP and AVIF consistently produce files 25-50% smaller than JPEG 
          while maintaining comparable visual quality.
        </figcaption>
      </figure>

    </article>
  </main>

</body>
</html>

Every image here has a purpose and a correctly written alt attribute to match. The decorative wave has an empty alt. The logo describes where it goes. The screenshots describe what they show. The chart alt text summarizes the key data point. This is real-world, production-quality HTML.

09Common Alt Text Mistakes Worth Knowing

Let’s talk about the errors that come up again and again. These are easy to make, especially when you’re building a page quickly.

10Alt Text, Accessibility Laws, and Why This Isn’t Just Optional

Here’s something worth knowing: in many countries, web accessibility is a legal requirement, not just a best practice.

The Web Content Accessibility Guidelines (WCAG), specifically Success Criterion 1.1.1, requires that all non-text content (including images) has a text alternative. This guideline is referenced in accessibility laws in the US (ADA), EU (European Accessibility Act), UK, Canada, and many other places. Large organizations have faced lawsuits over inaccessible websites.

But honestly, leave the legal angle aside for a moment. Writing proper alt text for images is the right thing to do. About 2.2 billion people in the world have some form of vision impairment. Not all of them are fully blind. Many use assistive technologies on the web every day. When you write good alt text, you’re making sure those people can use your content just as well as anyone else.

That’s what inclusive web development means in practice. It’s not a checkbox. It’s consideration for every person who visits your site.

If you’ve been following this tutorial series, you already know from our articles on semantic HTML, heading hierarchy, and navigation with ARIA that accessibility is a thread that runs through everything we write. Alt text is no different. It’s one more brick in that same foundation.

11A Quick Visual: What Happens When an Image Fails to Load

Let’s see this directly. Here’s a live comparison of what your user sees when an image fails to load, with and without alt text:

When the image loads just fine, both look identical to the sighted user. But the moment that image fails (and images do fail: slow connections, moved files, server errors), the alt text is the only thing standing between a useful experience and a broken one.

12Alt Text For Images: The Cheat Sheet

Here’s a compact reference you can come back to whenever you need a quick reminder:

13Testing Your Alt Text: How to Actually Check It

Writing alt text for images is one thing. Verifying it actually works is another. Here are a few quick ways to test your page:

1. Disable image loading in your browser. Most browsers let you disable images in developer tools or settings. Visit your page with images turned off. You’ll see exactly what screen reader users and broken-image scenarios look like. Is the alt text meaningful?

2. Use browser developer tools. Right-click any image and inspect the element. Check that the alt attribute is present and has a real description.

3. Run an accessibility audit. Chrome DevTools has a built-in Lighthouse tool under the Audits tab. It specifically checks for missing or empty alt text on informative images and flags them. It’s free, fast, and gives you actionable results.

4. Try a screen reader. NVDA (Windows) and VoiceOver (Mac and iOS) are free. Tab through your page with one and actually listen to how your images are announced. There’s no better test than the real thing.

14Building Inclusive Web Experiences, One Image at a Time

When you write thoughtful alt text for images, you’re doing something that goes beyond a single HTML attribute. You’re making a deliberate choice to include everyone who visits your page, regardless of how they access the web.

We’ve covered a lot of ground here. You now understand what the HTML alt attribute is and why it exists, how to write descriptions that actually help people, how screen readers use alt text in HTML to serve visually impaired users, how Google uses it for image indexing and page relevance, when to use empty alt text for decorative images, how to handle different image types including charts, functional images, and images with text, and the common mistakes to avoid.

That’s a solid foundation. And it all connects back to what we’ve been building throughout this entire series: writing HTML that works for people, not just for browsers. If you want to revisit how images fit into the bigger picture, check out our guide on mastering images in HTML5, where we covered the img tag, formats, and optimization in depth.

Coming up next in this series, we’ll look at responsive images with srcset and sizes, where you’ll learn how to serve different image files to different screen sizes and resolutions for better performance. It builds directly on what you’ve learned here.

For now, go back to a page you’ve built before and review every image on it. Do they all have alt text? Is the alt text actually useful? That’s your homework. It’ll take you fifteen minutes and make your page genuinely better for every person who visits it.