Hey Fellow Coders,
This may or may not be your first time viewing html markup, but If it is then you are in for a real treat. If this is not your first time viewing Html markup then it could just be a refresher.
Below is an example of basic html elements that are not indented correctly.
<html> <head> <title>Incorrect Indentation</title> </head> <body> <div class="navbar navbar-default navbar-fixed-top"> <div class="container"> </div> </div> </body> </html>
As you can see the user has the correct opening and closing tags, yet they are all aligned with the wall of the editor and not correctly indented to its original parent tag. This type of code when presented to other developers will look sloppy and difficult to read once there are a plethora of lines.
Now I will demonstrate the same example as aforementioned, but in clean indentation.
<html> <head> <title>Correct Indentation</title> </head> <body> <div class="navbar navbar-default navbar-fixed-top"> <div class="container"> </div> <!--closing container tag --> </div> <!--closing main-navbar tag --> </body> </html>
This code is much neater, more professional looking because all the code aligns with its parent tag so it's much easier to read. As you have noticed I have added comments to the closing div tags. The reason I do this personally and I think people should make a habit of this is because when you have over 5-10 div's nested within one another it can sometimes get confusing which closing div belongs to which opening div element. I save myself the trouble, by commenting on the closing div tags.
I hope this brief, but simple tutorial on how important element indentation was helpful. If you have any questions regarding indentation please feel free to message me.