When I first began learning HTML in 1998 my messy code very easily qualified for the epithet “tag soup.” Quite often I had very little clue what I was doing and very often was copying somebody else’s code and simply changing the content without touching the tags so I wouldn’t “screw anything up.”

As I started to learn more about HTML from online tutorials and books (yes, I learned quite a bit from HTML for Dummies in 1998) I would see it advised that an HTML coder should “indent their code.” But I never saw anywhere an explanation as to what should be indented, what it should be indented in relation to, how much it should be indented, if indentation meant anything more to the logic of the code than just “some lines don’t start at the far left edge,” etc. Still, back then I wasn’t sure if these were even valid or important questions. So I would go through my code and randomly indent some lines then think, “There, my code’s indented. I hope those online tutorials are happy now.”

It wasn’t until I began learning XML in 2000 that I started to figure out how to properly indent HTML (and XHTML) and the rule is that you indent child elements one tab to the right from their respective parent element. Doing this helps you to see the proper parent/child/sibling relations between the elements in your page and that, in turn, helps with any possible DOM manipulation you may perform on those elements.

I realize some may say, “But, wait. Can’t I just have Firebug show me the DOM tree of my page?” Yes, actually you can, but if you don’t know how to correctly indent your code in the first place then you may be lacking an important quantum of understanding of your own page. It should be second nature to anybody coding HTML to structure their code in much the same way Firebug will display it. Of course, Firebug is a great tool but in my personal use that one aspect of it is a little redundant and merely a duplicate of what I already see in my own code development window (admittedly, this feature of Firebug does become more necessary the more includes come into play, but any chunk of HTML code we are working on in one window can and should be indented properly relative to itself).

UPDATE (February 9, 2008)

I just learned about HAML today and realized it is all about the importance of correctly indenting XHTML elements. Now I know I’m not the only one who feels this way.

I may have a follow up indentation entry later…