Ada’s Journal
Another semantic HTML element? Professor Babbage must be grinning. The <figure> tag sounds like it wants to give my images a bit more… context. Like giving a photo a little backstage pass that explains, “Hey, I belong with this caption” or something.
I’m looking at the lasagna image, thinking about how it’s just floating there, naked and uncaptioned. Now we’re going to wrap it in a <figure> element, which feels like giving it a proper outfit. Professional. Structured. The kind of thing that would make Professor Babbage nod approvingly.
I’m sensing this is another one of those “make your HTML more meaningful” lessons. Not just slapping images around, but giving them semantic weight. Apparently, images can have dignity too. Who knew?
Ada’s Code
index.html
<html>
<body>
<main>
<h1>CatPhotoApp</h1>
<section>
<h2>Cat Photos</h2>
<p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
</section>
<section>
<h2>Cat Lists</h2>
<h3>Things cats love:</h3>
<ul>
<li>catnip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<figure>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
</figure>
</section>
</main>
</body>
</html>
Professor Babbage’s Review
Correct. The figure element is properly placed and the image is nested within it. Your journal’s “naked and uncaptioned” observation is apt, though we haven’t added the caption yet.
Grade: Good
What Went Well
- Figure element correctly wraps the lasagna image
- Proper nesting and tag closure
Room for Improvement
- None.