Learn HTML by Building a Cat Photo App - Step 23

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

How do I nest my image within a figure element?

  **Your code so far**

<html>
<body>
  <h1>CatPhotoApp</h1>
  <main>
    <section>
    <h2>Cat Photos</h2>
    <!-- TODO: Add link to cat photos -->
      <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</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>cat nip</li>
        <li>laser pointers</li>
        <li>lasagna</li>
      </ul>
   <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg"<figure> alt="A slice of lasagna on a plate."</figure>
    </section>
  </main>

</body>
</html>

  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.5 Safari/605.1.15

Challenge: Learn HTML by Building a Cat Photo App - Step 23

Link to the challenge:

2

Have a check on Google for this - W3Schools and the Mozilla Developer network have very good explanations.

3

You should restart the step as the code is now malformed.

Put the opening tag of the figure element on the left side of the image. Then put the closing tag of the figure element in the right of the img.
This is called nesting.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.