Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML How to Make a Website Creating HTML Content Structure the Image Gallery

Jackie Jen
Jackie Jen
2,723 Points

What does the <img alt=""> mean

Hello,

I have no idea on what is the attribute of alt="". although nick explain on the video but i still can't get it. can someone please give me an example?

Thanks

4 Answers

Stone Preston
Stone Preston
42,016 Points

alt text is read by screenreaders (Jaws is a popular one) that are used by people with visual impairments (its also used by search engine bots etc but the main audience is people with visual impairments). They have trouble viewing (or cant view) the image itself, so the screen reader reads off the alt text that is specified for that image tag. Alt text is usually some descriptive text about the image. see here for more information.

for example, If I had a picture on my site of Sir Paul Mccartney, my img tag might look something like this:

<img src="paulmccartney.jpg" alt="Sir Paul Mccartney, The Beatles bassist and singer">
Mohammed Jammeh
Mohammed Jammeh
37,463 Points

You use the alt attribute to describe the image, it's like a caption. For example, let's say you are using a Twitter logo in your page, the alt attribute of image will be "Twitter's Logo". The reason why images have images have alt attributes is so that people who have visual impairments can use their screen readers to read the description of the image. I hope that helps.

Jackie Jen
Jackie Jen
2,723 Points

hi Thanks for the info.

when images in web browser, screen reader use to identify and interpret what is being displayed on the screen to avoid visual impairments. Alternative text (alt) ensures that no information or functionality is lost.

did you know why alt = ""? since alt function is to ensure no information or functionality lost

regards

Stone Preston
Stone Preston
42,016 Points

sometimes when building a site you may just use an empty string as alt text and go back and fill it in later.

Jackie Jen
Jackie Jen
2,723 Points

Thanks Preston & Jammeh. i get it now. really appreciated it