FAQ: Learn HTML - Intro to HTML - Image Alts

FAQ HTML FAQ
#1

FAQ image
FAQ image1000×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

4 posts were split to a new topic: Should alt show up when hovering?

#20

There’s a bug with this exercise. You can bypass it by clicking solution.

#21

I believe you should always include an alt attribute even if it’s alt=" " for example if there is a description of the image, directly underneath it.

#22

hey!
Just wanted to know what it means to put a # in src?
ex:- src="#"

#23

The # (hash) when written in the location bar means current page. It is often used as a placeholder when we are writing our HTML structure. Once that is in place we can fill in the missing URLs.

If we see a link like this…

<a href="#">Top of Page</a>

that tells us clicking the link will cause the page to scroll back to the top.

2 Likes
#24

Addendum

Given we have a current page that means we can more closely define the hash to mean, “A fragment at this location”, which fragment may be the BODY, or any descendant of it.

Say we have a tag at the top of the page…

<nav>

and we give it an id…

<nav id="top">

Now that ‘to top’ link could look like this…

<a href="#top">Top of Page</a>
#25

In what situation would I not use alt on an image?

#26

Quite simply, when the image is window dressing with no content value (i.e., skin graphics, filler, random visual, etc.).

Another case is when textual content is represented in a graphic, and it is meaningful to the topic. For this element we would use the title attribute.

title="textual content in an image"

In both of the above cases we would not leave off the alt attribute, but leave the value empty.

alt=""
#27

Add the alt attribute to the image and include a description. Make sure the description accurately describes the image.

someone can help me to add the ‘alt’ attribute? i don’t know where to go

#28

Visit W3C’s Easy Checks page and read the section on how to handle image alts accessibly:

Recommendation to Codecademy for making the Image Alts exercise clearer -
Instead of saying " If the image on the web page is not one that conveys any meaningful information to a user (visually impaired or otherwise), the alt attribute should be left empty."

use the text and example directly from W3C to improve clarity and avoid misunderstanding:
If an image is just decorative and people don’t need to know about the image, then it should have null alt ( alt=" " ).

It would also be useful to add links to the W3C to provide the best resource for accessibility questions.

1 Like