Structuring Your HTML Document

February 2, 2010

By Matt Danner

I see a lot of broken sites. It seems like the leading cause for simple breaks in a site is a missing closing tag. It happens to everyone from time to time, but there really is a simple solution that can make life much easier: Proper structure.

Sure, you can have ugly html and still have a beautiful site. But what about when you find your footer crammed up into your sidebar? Now you have to hunt through the code, counting the number of </div> you have. With a little bit of extra work when you set it all up, you will have no problem finding out where that end tag is missing.

Here is an example of what I mean:

Where is the error in this code?
<div>
<p>This is some random text
</p>
<div>
<a href="http://example.com">Link Text Here
</a>
</div>

This is a really short example, but it will still probably take you a few minutes to figure out what is missing. Translate that to a whole page-template of html. It could take your a very long time to track down the problem.

Here is the right way:
<div>
>---<p>This is some random text</p>
>---<div>
>--->---<a href="http://example.com">Link Text Here</a>
>---</div>

For clarity, >---- represents a tab. This way, you can clearly see where the issue is: The first div that was opened is not closed. Now I can easily correct it like this:

<div>
>---<p>This is some random text</p>
>---<div>
>--->---<a href="http://example.com">Link Text Here</a>
>---</div>
</div>

A good rule of thumb that I use is that if you didn’t close the tag on the line above, tab in once. If you are closing a tag, move back one tab. This allows opening tags and closing tags to be easily identifiable in the same vertical column.