Learn HTML by Building a Cat Photo App - Step 5

HTML-CSS
1

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

“Identify the main section of this page by adding a <main> opening tag after the h1 element, and a </main> closing tag after the p element.”
i am finding it difficult to fix this. i need help please !

  **Your code so far**

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

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:103.0) Gecko/20100101 Firefox/103.0

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

Link to the challenge:

1 Like
2

Hi!

You do not need to create a new h1 element. There should only be one h1 element in a html file.

This is an element.

<p>Hello</p>

It is made of an opening tag <p>, and a closing tag </p>.

So if the main element needs to be after the h1 element, it needs to have its opening tag after the h1 elements closing tag.

<p>Click here to view more cat photos</></p>

Also remove the extra brackets and slash added in the p element. It doesn’t need to be there.

And if the main closing tag needs to be after the p element, that means it needs to be after the p elements closing tag.

3

Okay Ella, thanks very much

1 Like
4

But please i am still not getting it right , wheere this </main> closing tag is meant to be after the p element.

1 Like
5

Please show me your current code, then I can see what you need to change.

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

I’ve edited your post for readability. 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 (').

8

Your main closing element is in the correct place! :slight_smile:

However you’ve removed the h1 and h2 closing tags. They need to be put back or the code won’t pass.

Your <main> opening tag still needs to be after the h1 element. This is a section element that is after a h1 element.

<h1>Hello world</h1>
  <section>
    <p>Paragraph 1</p>
  </section>

It may also help to read the w3schools page on the <main> element.

9

i have done that, but it’s still not correct .
Maybe i should restart it

10

Feel free to restart if that will help. But if you’ve not solved it, please share your code. :slight_smile:

11

i finally did solved it. thank you for the help

1 Like
12

Good job! Well done! :tada:

13

i am finding it hard understanding this step 12;

You can see the words cat photos underlined next to the image in the preview now. That’s your link; feel free to give it a click.

In the text of your p element, turn the words cat photos into a link to https://freecatphotoapp.com. When you are done, remove the old anchor tag and text below the paragraph.

Click here to view more cat photos.

cat photos
14 
  <p>Click here to view more cat photos.</p>


  <a href="https://freecatphotoapp.com">cat photos</a>
15

Hi,
Please create a new topic post for this question using the ‘ask for help’ button. It is considered good forum etiquette to make a new topic post if you need help with a different question.

16

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