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
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.
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.
