Lost need help with step 6 HTML

Tell us what’s happening:
Pretty confused on what I am missing?

  **Your code so far**
<html>
<body>
  <h1>CatPhotoApp</h1>
<main>
     <h2>Cat Photos</h2>
<ul>
  <li> Child Element 1 </li>
  <li> Child Element 2 </li>
</ul>
   
  <!-- 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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.4 Safari/605.1.15

Challenge: Step 6

Link to the challenge:

1 Like

Hello @amitkhalsa25

The question is asking to indent two spaces in the codes inside main part, instead of copying the example given.

This part in the question is for reference instead of copying.

<ul>
  <li> Child Element 1 </li>
  <li> Child Element 2 </li>
</ul>

What you need to do is something like this: (leaving previous codes unchanged and only change the spacing)

<main>
  <p></p>
</main>

Hope this helps :smile:

So sorry! Still bit confused where to leave spaces?

Sorry I got it! The spaces part tricked me that’s me!!!

HI @amitkhalsa25 !

Welcome to the forum!

I am glad you were able to solve the challenge.

There is currently an open issue on github for this challenge and the moderators and fcc contributors are trying to work on this step but we are unsure where the confusion is coming from.

Can you explain what part of the directions were confusing?

I believe that part of the issue is that many non-English speakers don’t understand indenting or the word indent for that matter. A little explanation on what indenting is and the intuition on why it is needed would clear up the confusion.

1 Like

bro pls let me know i am also stuck in same tricky part not knowing

Reset your code and add two spaces each before h2 and p. These spaces don’t have any real function but make the code more human readable.
Compare the following two snippets

<main>
<h2>Cat Photos</h2>
<p>Click here to view more cat photos.</p>
</main>

vs

<main>
  <h2>Cat Photos</h2>
  <p>Click here to view more cat photos.</p>
</main>

In the second code snippet, it is immediately clear that h2 and p are contained within main because of the indentation(spaces at the start of the line), whereas in the first code snippet, you have to take a moment to search for the closing tag </main> to understand that main contains those two elements.

Indentation becomes more important as the code becomes bigger since the big number of tags quickly makes the code an incomprehensible soup if not indented properly.

how did you solve this step?
I didn’t get it