How to Nest The img element within Figure Element

Hi, I’m new to coding, I have no idea what I am doing wrong, I got stug at step 22 of responsive web design about nesting an image within a figure element.

  **My 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>
      <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>
  **Your browser information:**

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

Challenge: Step 22

Link to the challenge:

The figure element mentioned is basically the <figure>...</figure>.
The challenge asked you to put the image inside this element.

HTML element names should be all lowercase.

The browser doesn’t care because elements are technically case-insensitive but the test doesn’t allow you to write it as you have.

1 Like

@lasjorg Thank you so much, I have been scratching my head. The test is case-sensitive. Noted.

Also, just in general, using all lowercase is the correct way to write HTML elements. That is the expected format when reading HTML and it won’t cause issues with other systems that might expect a different format.

Later when you get into frameworks like React using JSX the casing actually matters.


Some examples:

Normal HTML

<button>Submit</button>

Custom element (must be kebab-case)

<submit-button>Submit</submit-button>

React component (User-Defined Components Must Be Capitalized)

<Button>Submit</Button>
1 Like