Whitespace Usage in HTML and CSS

As web developer, we are used to the use of whitespace in our codes. While compilers and intrepreters ignored whitespace, we, as humans, needs whitespace as a visual cue. The same is true for HTML and CSS.

There are many ways to implement whitespace, apart from basic indentation, we can also make good use of whitespace to help us better understand the code, for example:

The concept behind the alignment of attributes is nothing new. HTML5 Boilerplate has been doing this sort of thing for some time now with its IE conditional classes. Here’s what that chunk of code looks like in the latest version:
<!–[if lt IE 7]>           <html class=”no-js lt-ie9 lt-ie8 lt-ie7″> <![endif]–>
<!–[if IE 7]>              <html class=”no-js lt-ie9 lt-ie8″> <![endif]–>
<!–[if IE 8]>              <html class=”no-js lt-ie9″> <![endif]–>
<!–[if gt IE 8]><!–> <html class=”no-js”> <!–<![endif]–>
In this case, the class attribute on the opening <html> tag in each conditional (and, incidentally, the tag itself) is being aligned, because this is the part of the code that’s most relevant to readability and maintenance, and the part of the code that would suffer most in readability if this alignment were not present.

Source: Smashing Magazine

There are many concepts of whitespace usage described in Smashing Magazine “Using White Space For Readability In HTML And CSS” that I am sure we all can learn from.