Importance of Element Indentation
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.
Having proper indentation in Html, CSS, Javascript, etc is essential. When you are sharing your code with other developers you want it to look neat and presentable. Your code is a representation of YOU and YOUR work. Dont you want it look awesome?
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.
Code on!
Written by irwin
Related protips
1 Response
How much I hate those unnecessary, bloating closing comments. Any decent editor can highlight opening/closing tags. Using those comments is also error-prone - your code is a great example. The first div closing tag is the container div, NOT the main-navbar tag. You obviously switched the closing div tag lines (this formatting wouldn't make sense otherwise). Last but not least - manually formatting your code/indentation is also unnecessary, if you're using any decent editor.
Have a fresh tip? Share with Coderwall community!
