Is two space indentation for nested elements standard practice?

Question

Is two space indentation for nested elements standard practice?

Answer

For readability, it is important that we use indentation to illustrate nesting but there is no official standard on how many spaces or tabs to indent by. That having been said, 2 space indentation is common and adheres to Google’s HTML style guide.

26 Likes

Is it considered proper , or even allowed, to also include one blank line, White Space, between elements in order to make the code more readable in the event some other person may need to read and/or edit the code?

22 Likes

If the code is not cluttered with a inline style attributes or excessive use of class and id then a single line break is perfectly acceptable, perhaps even encouraged. Too much white space can negatively affect readability.

A blank line between distinct sections is not a bad idea, though. That can be helpful to spot page segments.

43 Likes

Now one feels the perfect fool… linebreaks vs indentation. How the heck was I blinded by that?

Two space indentation is very likely preferred over four space or tabs owing that there is so much nesting in HTML. The browser cares not what we use, so it’s strictly readability we’re concerned with.

Indentation is not decoration. We use it to convey nesting to the reader. HTML is declarative and parental. Nested elements are children at every level of nesting to which they belong. This manner of writing the HTML helps in tracking these relationships.

144 Likes

You’re super helpful you’re everywhere I read. =) Thank you.

35 Likes

where is the option to like this answer ??

1 Like

So this is probably a dumb question, but do I need to use 2 indenations for div under body or does it go on the same level? I’m still not clear on lesson 6 are div and body relatives or is body parent to div? It just says that div is an element. Cause it seemed like div is used to induce more structure concerning readabilty and the code run correctly whether I’ve put it on the same level as body or intended it (I’ve intented the lines under it then , more precisely in this exercise h2 and h3 ). But my logic kinda dicates that it makes difference in structure and groupation if I indent it under body or no. Maybe I’m completely off on this, but I could use clarification concering relations between div and body. Thank you :smiley:

2 Likes

As far as indentation of HTML is concerned, it is not a requirement. No indentation is just as valid, assuming the document is well formed.

<body>
<div>
<section>
<h1>heading</h1>
<p>paragraph</p>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<p>paragraph</p>
</section>
<section>
<h1>heading</h1>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<figure>
<img>
<figcaption>caption</figcaption>
</figure>
</section>
</div>
</body>

The above is perfectly valid markup. What relationship does each element have to the BODY? In general, they are all descendants.

DIV is the only direct child. SECTION is a grandchild of BODY, and a direct child of DIV.

H1, P, and UL are direct children of SECTION, grandchildren of DIV, and great-grandchildren of BODY. Together they are siblings.

LI is a direct child of UL. All the LIs are sibling elements.

In the second SECTION, H1, P and FIGURE are direct children of SECTION. IMG and FIGCAPTION are sibling children of FIGURE.

Indentation helps us to identify descendants, often referred to by level.

<body>
  <div>
    <section>
      <h1>heading</h1>
      <p>paragraph</p>
      <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
      </ul>
      <p>paragraph</p>
    </section>
    <section>
      <h1>heading</h1>
      <p>paragraph</p>
      <p>paragraph</p>
      <p>paragraph</p>
      <figure>
        <img>
        <figcaption>caption</figcaption>
      </figure>
    </section>
  </div>
</body>

Hopefully that helps clear the air, somewhat. Not sure it answers all your questions, so ping us back if you need more clarification or examples.

68 Likes

This was extremely helpful, thank you very much :slight_smile:

1 Like

seem not to understand “Remember to always add two spaces of indentation when you nest elements inside of

s for better readability.” I’ll appreciate if anyone can explain this with example…thanks.

Hello and welcome :smiley:

Indentation means spacing. Usually, indentation is very important in coding, most codes won’t run if the indentation is not correct. In HTML this is not the case, the code will run correctly whether you put spacing or no. BUT… “for better readability” means you should use indentation since the code then literally is easier to read and if anyone else came across your code, you would make life much easier for them. Why? Because in HTML all elements we use are like a family tree (body is parent to div, div is parent to section, section is parent to heading and paragraph etc.) so we use indentation to express these relationships. For example:

<body>
  <div id="intro">
    <h1>Introduction to HTML</h1>
    <p>Since relationships between elements are represented in spacing, if two elements are on the same level, they are considered siblings. In this example I tried to arrange them properly so you can see the parent is body element, his first and only kid is div element (has two spaces of indentation) while h1 and p elements are siblings, ergo, are on the same level of indentation (or have the same spacing) and are located right under each other but since they are kids to div element, we had to use two spaces on them to accentuate this</p> 
  </div>
</body>

Hope this helps a bit :smiley: you can refer to my question above, mtf user explained it great for me too.
Good luck!

17 Likes

Why doesn’t the online code editor automatically indent things that are put in the div tags? I put in the div tags, but had to manually indent the items between the tags Thanks!

Because as said before, indentation is not a standard, BUT a suggestion of good coding practices.

3 Likes

you are really a fantabulous guide :sunglasses: here. thanks a ton. :smiley:

yes! for readability and other developer can read easily

Thank you for sharing!

Thank you so much for all your explanations.

1 Like

True, mtf, thank you!

Basically every article I find myself reading has you pinned up there as one of the first to answer!
I almost feel like I’m stalking you at this point by liking all of your posts :grinning_face_with_smiling_eyes:
Your support really means a lot to us new coders

2 Likes

Doesn’t a code editor like VS Code or Sublime auto indent, if setup correctly.

Very helpful explanation!

1 Like