Build a Cat Photo App - Step 5

HTML-CSS
1

Tell us what’s happening:

hi,
i have tried everything still saying" Your main element’s closing tag should be below the p element. You have them in the wrong order."

Your code so far

<html>
  <body>

<!-- User Editable Region -->

  <main>
  <h1>Most important content of the document</h1>
  <p>Some more important content...</p>
  </main>
    <h1>CatPhotoApp</h1>
    <h2>Cat Photos</h2>
    <!-- TODO: Add link to cat photos -->
    <p>Everyone loves cute cats online!</p>
    

<!-- User Editable Region -->

  </body>
</html>

Your browser information:

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

Challenge Information:

Build a Cat Photo App - Step 5

2

Welcome to the forum :wave:

The instructions did not ask you to copy the example code into the editor. You should basically never do that, it’s just an example of syntax.

Reset the step, and try it again.

3 
<main><h1>Most important content of the document</h1>
  <p>Some more important content...</p></main>

i have tried, still not working

4

This text is part of the example and should not be included in your code.

5

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

6 
<main><h1>Cat photos</h1>
  <p>Cat photos...</p></main>

thank you, appreciate it.
this is what i've tried
7

you need to add main aroung the existing element, do not add other elements this step

8 
<main>
  <h1>Cat photos</h1>
  <p>Cat photos...</p>
</main>

and still not working
9

reset the step, restore the code as it was, then you must add ONLY main.

main has to go around the EXISTING h1, h2, comment and p

10 
<main><h>Cat photos</h></main>
 <main <p>Cat photos...</p> </main>
  <main><h1>CatPhotoApp</h1></main>
  <main><h2>Cat Photos</h2></main>
11

Just add main once, and nest all three existing elements within.

It should look a bit like this:

<element>
    <nested></nested>
    <nested></nested>
    <nested></nested>
</element>

You should RESET the step to get the original code back to the starting state.

12

those are still not the elements you need to have. Have you reset the step?

13 
 <main>
    <h1>Cat photos</h1>
    <p>Cat photos</p>
</main>
14

This is good but:

Press the Reset button to reset the code to the original state.

The code should start like this:

    <h1>CatPhotoApp</h1>
    <h2>Cat Photos</h2>
    <!-- TODO: Add link to cat photos -->
    <p>Everyone loves cute cats online!</p>

If it doesn’t look like that, press "Reset" below the “check your code” button.

15

I sorted, thank you.
sorry for being a pain :smile:

1 Like
16

Not a problem, glad you got it!

It should get easier as you get to know how the steps and lessons work.