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.
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?
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.
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.
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
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 you can refer to my question above, mtf user explained it great for me too.
Good luck!
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!
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
Your support really means a lot to us new coders