Learn HTML by Building a Cat Photo App - Step 5

HTML-CSS
1

Tell us what’s happening:
When I check for the code it tells me that the main closing tag must be below the p element, what does that mean?

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/104.0.5112.102 Safari/537.36 OPR/90.0.4480.100

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

Link to the challenge:

2

:balloon: Hi, welcome to the forum!
We see you have posted some code but did you have a question?

3

Yes I have one, so i edited the post

4

Thanks.

So when adding elements we must not insert them part-way into another element.

For eg: given this line of code
<p>a paragraph </p>
the following is an incorrect insertion of a h1 element

<p>
  <h1>a paragraph
  </p>
</h1>

To do it correctly we must change to:

<p>
  <h1>a paragraph
  </h1>
</p>

Another example of nesting elements correctly for ref:

<body>
  <main>
    <h1></h1>
  </main>
</body>

So always try to put elements either completely inside another one or below or above another one, never half-way in/out

5

Now I tried <h1><main>CatPhotoApp</h1> <h2>Cat Photos</h2> <!-- TODO: Add link to cat photos --> <p>Click here to view more cat photos</p></main>
but still it’s incorrect

6

Yes you are still not matching up correctly.

Here is what you wrote inside a pre formatted code block:

  <h1>
     <main>CatPhotoApp
  </h1> 
  <h2>Cat Photos</h2>
  <!-- TODO: Add link to cat photos -->
  <p>Click here to view more cat photos</p>
</main>

Does that look correct to you?

Remember that you cannnot partially insert an element inside another one. Either it is all inside or all outside.

7

So then what must I do?

8

Well the instructions say:
adding a <main> opening tag after the h1 element, and a </main> closing tag after the p element.

And you have added the <main> inside the h1 instead of after it (refer to my last post where I showed you the code indented? You can see the main tag is in the wrong place).

So just move it one line down so it is after the h1.

9

Then can you help me correct this code?

    <h1>
      <main>CatPhotoApp
    </h1>
    <h2>Cat Photos</h2>
    <!-- TODO: Add link to cat photos -->
    <p> 
    </main>Click here to view more cat photos.</p>```
10

here is the correction. Please try to understand it before moving on to the next step or you will be stuck again quickly on harder stuff.

This is wrong because the main tag is inside the h1 but they want it after the h1.
So please move it below the </h1>
(the instructions said below :point_down:t4: so please move it below)

11

ok thank you very much

1 Like
12

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.