Valid XHTML re-code case study

A gentleman popped into our IRC channel this evening asking for some help writing some HTML. He was having a hard time aligning some badges at the bottom of a column. Being all hopped up on birthday cake icing, I accepted the opportunity to write some code for the fun of it and recoded his page. I present to you now a case study in composing valid XHTL and good layout. In the process of exemplifying a possible solution to this man’s problem, I would like to illustrate how simple, lean, and user-friendly proper, valid code can (and definately should) be.

View original code. | View my code.

Now, if you attempt to validate the authors code, you will notice that it actually almost validates. So, what is the problem? Why didn’t I simply align his badges at the bottom of his column and move on? I will not take the time to critique his code completely here, but will offer the following general observations instead:

1. tables should not be used for layout
2. code should be lowercase
3. indentation and tag pedigree should be visually logical and consistant
4. it is 2005, there is no reason that all code shouldn’t be at least XHTML transitional
5. style declarations should be contained within an external style sheet
6. good code should not just be legible; it should be beautiful

• wade
• 0 responses
•  Articles