HTMLmarkup~8 mins

Image source and alt attribute in HTML - Browser Rendering Trace

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Render Flow - Image source and alt attribute

[Read <img>] -> [Parse src attribute] -> [Request image from URL] -> [Load image data] -> [Render image box] -> [Display alt text if image fails]

The browser reads the <img> tag, fetches the image from the src URL, and displays it. If the image can't load, the alt text is shown instead.

Render Steps - 3 Steps

Code Added:<img src="https://example.com/cat.jpg">

Before

[Empty page]

→

After

[Image box with cat picture]

The browser loads and shows the image from the src URL.

🔧 Browser Action:Fetches image data and paints image on screen

Code Sample

This code shows a cat image. If the image can't load, the text 'A cute cat sitting on a sofa' appears instead.

HTML

<img src="https://example.com/cat.jpg" alt="A cute cat sitting on a sofa">

Render Quiz - 3 Questions

Test your understanding

After step 1, what do you see on the page?

AThe alt text displayed

BThe cat image displayed

CAn empty box with no content

DA broken image icon

Common Confusions - 2 Topics

Why do I see a broken image icon instead of the alt text?

Some browsers show a broken image icon plus the alt text or only the icon. The alt text is always available to screen readers even if not visible.

💡 Alt text is for accessibility and fallback, but visible fallback depends on browser.

Does the alt text show when the image loads correctly?

No, the alt text is hidden when the image loads successfully. It only appears if the image cannot be displayed.

💡 Alt text is invisible if image loads, visible only on failure.

Property Reference

Attribute	Purpose	Visual Effect	Accessibility Benefit
src	URL of the image to display	Shows the image from the URL	N/A
alt	Text description if image can't load or for screen readers	Shows text if image fails	Describes image for screen readers

Concept Snapshot

The <img> tag uses src to show an image from a URL. The alt attribute provides text if the image can't load. Alt text is also read by screen readers for accessibility. If the image loads, alt text is hidden. If the image fails, alt text is shown instead.