Ada’s Journal
Professor Babbage’s obsession with precise documentation continues. Today we’re adding a <figcaption> to our lasagna image, which feels like an extremely specific way of telling the world “Yes, this is lasagna. In case you were wondering.”
I’m starting to see a pattern with these HTML semantic elements. They’re like tiny information architects, each with a very specific job. The <figure> wants to wrap an image, and now the <figcaption> wants to explain that image. It’s almost like HTML is building a very precise language of visual explanation.
The syntax looks straightforward enough — nest the caption inside the figure, right after the image. I’m betting Professor Babbage will appreciate the orderliness of this approach. He does love his precise arrangements.
Ada’s Code
index.html
<figure>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
<figcaption>Cats love lasagna.</figcaption>
</figure>
Professor Babbage’s Review
Correct. The figcaption is properly nested and positioned. Your journal shows you’re starting to understand semantic structure, though “information architects” is unnecessarily flowery. They’re just tags with defined purposes.
Grade: Good
What Went Well
- Figcaption correctly nested within figure element
- Proper element order (img first, then figcaption)
- Exact text match as required
Room for Improvement
- None.