I need help with step 6 html - indent

HTML-CSS
1

Step 6

HTML elements are often nested within other HTML elements. In the previous step you nested the h2 element, comment and p element within the main element. A nested element is a child of its parent element.

To make HTML easier to read, indent the h2 element, the comment, and p element exactly two spaces to indicate they are children of the main element.

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

Check Your Code (Ctrl + Enter)

:heavy_multiplication_x: Sorry, your code does not pass. Hang in there.

Hint

Your comment should be below the h2 element and start 6 spaces over from the start of the line.

2

This lesson seems to be attempting to teach common organization of code so it’s easily readable. If my guess on that is correct it isn’t talking about how the code displays in a browser it means the code it self, I think the test is requiring you organize the code by using indents.

In text and code editors the Tab key is usually used to insert an indent so instead of the code looking like this:

<html>
<head>
<title>Examlple</tilte>
<script src="somejsfile.js" />
<link href="style.css" /> 
</head>
<body>
<div>
<h1>Line of text</h1>
<div>
[navigation_menu]
</div>
<div>
[content container]
</div>
</div>
</body>
</html>

The above can be difficult after we write a few hundred lines of code. If it’s all in the same column line like that (up and down) it’s extremely difficult to find what we’re looking for if/when we want or need to edit a specific part of the code. It looks more organized and is easier to find things in indented.

I think the code is asking you to do something like this:

<div> <!-- This opens the overall div container for the entire page --->
     <div> <!-- We'll use this for the header --->
       Header content 
        <div><!-- Nested div inside the header div -->
          This container is inside the header div so it's a nested child of the 
           header container therefore it's indented further.
        </div><!-- Close the nested div -->
      </div><!-- This one closes the header container. Same column as the one that opens it-->
</div><!-- Closes main div that contains the entire page. Same column as the one that opens it -->

The same things is usually done with css. We can actually write css all in one line.

body{background-color:puke;color:brown;margin:10px;}

It’s common practice to write it with indents and on separate lines so it’s easier to go through when we’re looking for something in it.

body {
  background-color: somethingugly;
  color: black;
  margin: 8px;
}
2 Likes
3

Hello,
Just put 2 spaces on each

, <!-- and

elements. Only 2 spaces

2 Likes
4

hello, have you solved this problem now? I have the same problem here and l cann’t solved too. lf possible,could you tell me how to do it…thank you very much

5

Indent a single space to h2, comment, and p. And ready.

1 Like
6

ok i just tried again… its actually very simple:
just press Tab button in front of the 3 codes.
tab creates a 2 space in front of those individual lines.

7

Brother add 2 space in every line before and after

8

Here you can see the answer

1 Like
9

Thanks :blush: you help me

10

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