How do I Know When to add the two Spaces of Indentation?

Language Help HTML
1

Hi everyone,

I was hoping to get some clarification on a question I just stumbled upon while working through the Introduction to HTML in the Full-Stack Dev career path. So the question is regarding the two spaces of indentation after a parent element. While I was working through the course it asked me to add div tags after which I should indent (two spaces) the tags afterwards, which in this case was an h2 tag. That I understand, however, it later asked me to add p tags under the h2 tags. This is where I got slightly confused should I be indenting the p tags underneath the h2 tags so they are the children tags of the h2 tags or would they be considered sibling tags to the h2 tags? Is there a correct way or is it personal preference? In my mind they should be indented but when I went onto the next lesson then it reformatted the code so that the h2 and p tags were siblings to each other.

I am not sure how to link the exercise I was doing, but it was under the Full-Stack Developer career path > Learn HTML: Elements > Introduction to HTML lesson.

Thanks for the help in advance!
Alex

2

Hi, there!

It is standard that, when nesting, the direct children of the parent element will be equally indented. You could technically indent to preference, but then it may become confusing for other developers to read your code.

Taking a look at the example you provided, it would be:

<div class="parent">
  <h2 class="child sibling"></h2>
  <p class="child sibling"></p>
</div>

The h2 and p elements are direct children of the div and siblings, so they are on the same level—hence the same indentation.

However, let’s include more nesting.

<div class="parent_1">
  <h2 class="sibling_1 child_1"></h2>
  <p class="sibling_1 child_1"></p>
  <div class="sibling_1 child_1 parent_2">
    <p class="child_2 sibling_2"></p>
    <p class="child_2 sibling_2"></p>
  </div>
</div>

In this example, the third and fourth p elements are nested within the second div, so they receive additional indentation. Once you start using an IDE like VSCode (unless you’re already using it or another one!), they will typically auto-indent.

I hope this helps! If you need further clarification, please feel free to ask. :slight_smile:

1 Like