Structuring your HTML code
We talk a lot about semantic and valid HTML. What people tend to forget are the structure of their HTML code. If you take a look at the source code of ten random sites, chances are that nine of them are very messy – source code-wise.
Is it worth spending time on structuring it probably? After all it doesn’t affect anything. Spiders don’t care and general users won’t notice as they won’t check your source code, most people don’t even know what that is.
In general, if you can say that no-one is going to look at your source code, then structuring is meaningless. But you will be surprised how often your source code could be viewed.
You really should structure your HTML code if you can answer yes to one of following questions:
1. Did I make the site for a person/company that is going to update the content themselves directly in the HTML?
2. Did I make the site to promote my skills a web designer, maybe as a part of a portfolio?
Alright, but how do I structure the HTML?
First of all, get rid of your favorite code-editor. The way they show the code tend not to match the way it is looks after it has been interpreted by the browser. Open your .html/htm in Windows Notepad, and clean it up.
Keep related code without any breaks and with the same left margin. Either use breaks to separate different groups of code, or better, descriptive comments. Related code could be the code within the HEAD tags. You could categorize your header by grouping it up with HTML comments. Separate links to .js from links to .css and separate META tags from .js and .css.
Example of good HTML structure.
Example of bad HTML structure.
Download Design
