Ada’s Journal
Another day, another HTML attribute. I’m starting to feel like Professor Babbage is just playing tag with HTML elements at this point. Alt attributes? Okay, fine.
I remember hearing something about accessibility in a distant conversation, but this is the first time I’m actually encountering it. An alt attribute is like a backup description for an image — if the image can’t load, or if someone is using a screen reader, this text steps in. It’s like giving your image a voice.
The example looks straightforward enough. I just need to add some descriptive text inside quotation marks. And not just any text — specifically “A cute orange cat lying on its back”. I’m sensing Babbage would appreciate precise instructions, so I’ll follow them to the letter.
Is this what developers do all day? Add attributes and describe cats? If so, I’m not complaining.
Ada’s Code
index.html
<html>
<body>
<main>
<h1>CatPhotoApp</h1>
<h2>Cat Photos</h2>
<!-- TODO: Add link to cat photos -->
<p>Everyone loves cute cats online!</p>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back">
</main>
</body>
</html>
Professor Babbage’s Review
Correct. The alt attribute is there with the exact text specified. Your observation about accessibility is accurate, though “giving your image a voice” is a bit precious.
Grade: Good
What Went Well
- Alt attribute added correctly with specified text
- Proper syntax with quotation marks
- Grasped the accessibility concept
Room for Improvement
- None.