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
June 19th, 2007 at 4:12 am
Is there any reason in particular that you chose http://www.kreativpotens.dk as a “bad” example, as it does not really seem all that bad.
There are literally hundreds of sites that are worse than the aforementioned, at least the content is structured above the secondary sidebar content in the HTML etc.
No, it doesn’t have perfect line indents when you view the source, but more than likely that is because of the content management system in use… not the users fault, and anyhow, it’s surely personal preference on how you write / indent your code?
Just seems rather odd to label that site as a “bad” example, are there personal views getting in the way maybe…
June 22nd, 2007 at 2:47 pm
Hi Chris
I chose that site because it was one of the first I put up. I didn’t think of cleaning up the source code at all, and likely I won’t waste my time with it as the vast majority of my readers doesn’t care about source code at all.
When I wrote the article and quickly had to find a bad example I couldn’t really remember one, so I took one of my own which I knew was bad and unstructured.
I don’t get any kicks of getting hits on that particular site, if you want to give me kicks please visit http:/niemi.it