Written by on

Structuring Your HTML Document

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.

Comments

  1. I totally agree with this article. When I am looking to make code changes, making sure that the structure remains intact is the only way that I can keep straight the work that I am doing will work right.

    One of the first things I do with code that “flat” (not an official definition or term by any means) is run it through my editor and create the structure. My editor colors the different elements too which is also very helpful.

Respond

×

Sale Ends Today! Save 35% OFF BackupBuddy with coupon code BACKUPWP35