Keep an eye on your markup

"How did that gap get there? Why aren't those lining up properly? Why is my browser crashing?" Sound familiar? Check your markup. How many hours have you spent sifting through code, only to find that little display quirk was caused by a missing </div> or </span> tag? Rest assured, if something looks wonky, it's probably the markup.

HTML a fundamental building block of every Web site. Without it, a site doesn't exist. Yet it's one of the last places we look to fix a problem. Often, it's just the byproduct of volumes of server-side code, but that doesn't make it any less important.

I've encountered the questions above and countless others that have been answered by taking a good look at the resulting markup. It's amazing how simple some of the answers have been. There are a few easy methods you can use to find those answers too:

Scan the problem area

Take a quick look at the source around the wonkiness and see if anything looks out of place. Pasting the code into a program with syntax highligting helps highlight misspelled tags or attributes nicely.

Take a step back

Sometimes the problem in one area is caused by a missing tag or incorrect nesting from another. Examine the surrounding markup to see if everything is nested properly.

Validate

Running a page through the W3C's validator service takes a lot of the guesswork out of narrowing down the cause of a problem. (The Web Developer extention for Firefox makes this super easy.) However, depending on the code used to generate the markup, it may highlight too many errors to be useful or if one error causes 50 others, it's difficult to determine what the true nature of a problem.

Look at the big picture

If first three methods aren't effective, explore the page's HTML using a tool like Firebug or by copying and pasting it into a text editor and indent everything so it's readable. This method is often the most effective. The simple act of making HTML readable reveals answers quickly. This tends to be a time-consuming process though, depending on what server-side programming was used to generate it and how much care was initially put into making the output readable.

If you try at least one of these methods the next time you spot something odd, I guarntee, you'll save yourself a lot of time and headaches.