Learn HTML by Building a Cat Photo App - Step 22

Tell us what’s happening:

saying I need to change the ive tried moving it around but i dont know where it goes

Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <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>

<!-- User Editable Region -->

        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <!-- TODO: Add image of lasagna -->
         </ul> <img src ="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg"
            <alt>="A slice of lasagna on a plate."
           

<!-- User Editable Region -->

      </section>
    </main>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Edg/120.0.0.0

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 22

Great work with closing the comment this time! You don’t need the closing tag </ul> before your image because it’s not closing anything. The closing tag for unordered list which was actually needed is already above your comment.

Now, coming to the img element, alt is an attribute of the img element and as such needs to be inside the img element, not out of it. So here’s how it should look finally:

        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <!-- TODO: Add image of lasagna -->
         <img src ="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg"
            alt="A slice of lasagna on a plate." />
2 Likes
    <ul>
      <li>cat nip</li>
      <li>laser pointers</li>
      <li>lasagna</li>
    </ul>
    <!-- TODO: Add image of lasagna -->
     </ul> 
     <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg"alt="A slice of lasagna on a plate.">
1 Like

attributes are not html elements so they are not placed within < and > .so write alt like src with it value and the image element is self closing so you forget to do it.

1 Like