FAQ: Learn HTML - Intro to HTML - Image Alts

#1

FAQ image
FAQ image.png1000×209 164 KB

This community-built FAQ covers the “Image Alts” exercise in Codecademy’s lessons on HTML.

Here are the most popular community questions on this exercise:

Join the Discussion. We Want to Hear From You!

Have a new question or can answer someone else’s? Reply (reply) to an existing thread!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources about HTML in general? Go here!

Want to take the conversation in a totally different direction? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account, billing, Pro, or Pro Intensive? Reach out to our support team!

None of the above? Find out where to ask other questions here!

#2

Other FAQs

The following are links to additional questions that our community has asked about this exercise:

  • This list will contain other frequently asked questions that aren’t quite as popular as the ones above.
  • Currently there have not been enough questions asked and answered about this exercise to populate this FAQ section.
  • This FAQ is built and maintained by you, the Codecademy community – help yourself and other learners like you by contributing!

Not seeing your question? It may still have been asked before – try searching for it by clicking the spyglass icon (search) in the top-right of this page. Still can’t find it? Ask it below by hitting the reply button below this post (reply).

#3

Hey there !
You say to leave the alt attribute empty if it’s not needed. Does an image need an alt attribute (even empty) or is it possible to put only src and no alt attribute ?
Thanks !

#4

It’s basically meant for screen readers. If there is no alt attribute the reader reads the full url, which is annoying.

#5

Ok, it makes sense. Thanks !

#6

I’m having trouble figuring out how to correctly add alt image attribute description - to the following code.

Where would this alt image attribute go?

When I place this attribute below the image source, the image description appears inpage to the right of the image and NOT when I mouseover the image as I think it should be.

Thanks -

#7 
<img src="#" alt="A Brown Bear" />

The alt attribute goes right after the image’s src.

1 Like
#18

Hey,

So I’m almost quite certain that this is a bug. I added the <img src="link" alt="A brown bear nonchalantly stares at you" />, but when I hit “Run”, it keeps asking me if I entered the alt attribute…
The right side panel where it displays the output of the code is all of a sudden blank (only shows http://localhost:8000 at the top) and doesn’t load any of the code. This just happens when I’m inside this URL. When I go back a lesson it works fine, but without being able to complete this lesson, I cannot even proceed to the next by just skipping this one.

Edit: Was able to skip this error by clicking on “Solution”

50%20PM
Screen Shot 2019-08-07 at 12.34.50 PM.png851×515 56.1 KB

#19

I also had that problem - I added the alt attribute but I can’t see any text when I hover over the image.

1 Like
#20

The alt attribute is not meant to be visible unless there’s an issue loading the image.

The alt attribute also serves the following purposes: (click here)
  • If an image fails to load on a web page, a user can mouse over the area originally intended for the image and read a brief description of the image. This is made possible by the description you provide in the alt attribute.
  • Visually impaired users often browse the web with the aid of screen reading software. When you include the alt attribute, the screen reading software can read the image’s description out loud to the visually impaired user.
  • The alt attribute also plays a role in Search Engine Optimization (SEO), because search engines cannot “see” the images on websites as they crawl the internet. Having descriptive alt attributes can improve the ranking of your site.

Learn more:

#21

The only browser to show the tooltip (for alt) when hovering was IE. Whether EDGE does, or not one cannot say. If you want a tooltip on hover, then include a title attribute.

alt and title are not the same thing, and not interchangeable. Search engines and screen readers can see both. ALT is intended to be brief and concise, and should never be used for SEO purposes. They are a requirement under accessibility guidelines. TITLE can be more descriptive, give more detail and be less brief. It can be leveraged for SEO.

We can style tooltips with CSS by using an attribute selector, afaik.

#22

Oh, thanks. that makes more sense.

1 Like