Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Indent your code properly

Friday, April 19th, 2013 by Servage

You may have observed that spoken language and written language are a bit different in many aspects like use of apostrophes and abbreviations in particular. We have inherent nature to shorten the sentences and use minimum words to describe the matter in spoken part. Whereas in written language we need to give all details if we are doing it for the sake of professional writing. You may ask me why you are going to discuss this on a technical platform, but for coding some similar things have to be considered. The need of the hour, in coding we hardly end up with small documents, as we have to do extensive coding, particularly in case of HTML and CSS. Therefore, file size and comprehensiveness of code demand some sorts of balance so let’s see some best practices used in the field to keep this balance practically.


In HTML, we use indentations to show the nested code thus we create hierarchy that gives us a clear vision of the place of code and its functions in relation to each other. However, we can do that without indentations, but in a big file, scanning of the content becomes impossible thus, we lose the readability of the code. As far as indentation in HTML is concern, many coders indent <header> and <body> elements under <html> as both are the children of the <html>, whilst many avoid this, but indent other nested code. In both cases, we don’t miss our basic purpose of code readability, but can save some white spaces.

The same practice for doing indentation is discovered in CSS code writing and we indent the CSS code the same way we do in HTML so we scan code easily. Suppose we donĂ­t follow this practice then we have to read each selector. Another way is to use modular CSS principles where we use class-based modules and decrease the use of descendant selectors like ul, li, etc.

In latest version CSS 3 we find a new feature that permits us to use comma-separated value set as well as space-separated value sets. When we use comma-separated value sets we write code in a single line thus naturally we follow the idea of setting single property in a single line and can save some white spaces against the space-separated value sets. This being practical until code is not lengthy, but it is not preferred when we end up with very long lines. Thus, aligning comma-separated codes vertically let us scan them easily.

The same principle is true for HTML and we can put each selector on a new line so we can go easy with somewhat lengthy selectors and make our debugging process speedy. In order to automate this process of indentation many text editors or IDEs give such facilities to do things without much effort. They may do this their own ways to make code standard as well as readable without sacrificing white spaces automatically or give options to do it with just a mouse click. It would be good idea for plug-ins developers to develop some sort of plug-ins for modern IDEs to help coders.

Also in PHP you can achieve the same effect, by indenting based on classes, methods, if/else statements, loops etc.

Indent properly

So, the main conclusion of this is that you should indent your code for better readability. Carefully select an indentation rule, using tabs or spaces, and make sure you always follow it. It will make your code readable and easier to understand for everyone. Common usage are one tab or double whitespace per indentation level.

References & more reading

Using White Space For Readability In HTML And CSS

Indent your code properly, 2.7 out of 5 based on 3 ratings
Categories: Tips & Tricks


You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.