Step 2: Validate your HTML and CSS
While standardistas disagree on whether or not having valid markup and CSS is truly necessary to claim support of Web standards, the benefits of validating your code should be obvious – doing so helps to identify errors which may cause you to write needless, excess code. And extra code means a slower download and a slower rendering of your page.
To understand what I’m getting at, take a look at this markup, which in combination with some CSS was rendering a three-color line:
<div id="divline"> <span class="blkline"><p></p></span> <span class="maindiv"><p></p></span> <span class="gradient"><p></p></span> </div>
Do you see anything wrong with this code? The person who wrote this code thought it was a fine solution because, in combination with some very verbose CSS, “it worked.”
To me, using a particular code solution “because it works” isn’t sufficient reason to use it. Validating your code, and learning from your errors, makes you a far better Web professional. In this case, validating the markup would have pointed out the nesting of block-level elements (p) inside of inline-level elements (span), and with that corrected, some of the CSS could have been omitted.
Validating can also save you time – if you spend more than a few seconds scratching your head over a rendering issue, it’s time to validate your markup and style sheet. Find those code problems before they become a frustration! (While you’re at it, you may want to check the quality of your JavaScript code with JSLint.)