Learn HTML by Building a Cat Photo App - Step 5

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

Your code so far

<html>
  <body>
    <h1><main>CatPhotoApp</h1>
    <h2>Cat Photos</h2>
    <!-- TODO: Add link to cat photos -->
    <p>Click here to view more cat photos.</p>
    </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/105.0.0.0 Safari/537.36 Edg/105.0.1343.50

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

Link to the challenge:

Can you please help me figure out where exactly to put the closing main tag. It says ’ the main’s closing element should be below the p element’

And you do have it placed correctly below the p element. The issue is with your opening <main> tag, which is supposed to be just after the h1 element but you have it inside the h1 element.

P.S. The hint that you are getting is just wrong. Most of the time the hints are very helpful, but in this case it is not.

Can you further elaborate where to put opening main element. I still cant figure it out

Hello!

You need to identify the <h1></h1> element and add right after it the <main> opening tag. Just have a closer look. :wink:

Hey!

Nesting in HTML happens when you have one or more elements as the children of other HTML element. For example:

<div>
    <button></button>
</div>

Here, the button is nested inside of the div. When one element is a child of another, Its opening and closing tag, both need to be inside of the parent element. If you start an element inside of one element and close it outside, that is not valid. for example:

<!-- this is valid. -->
<div>
    <p></p>
</div>

<!-- this is invalid -->
<div>
    <p>
</div>
    </p>

The latter is what you have in your code, which is why its not working.

Hope this helps! :smile:

Thankyou soo much everyone for helping.