View Source: How to check for a really bad web page

Here are two lines of a very poorly coded web page:


<tr>
   <td><input style="BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BORDER-LEFT: #666666 1px solid; WIDTH: 80px; BORDER-BOTTOM: #666666 1px solid; HEIGHT: 18px" /></td>
   <td><input style="BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BORDER-LEFT: #666666 1px solid; WIDTH: 80px; BORDER-BOTTOM: #666666 1px solid; HEIGHT: 18px" />&nbsp;<img height="14" alt="" width="7" border="0" src="/ccData/CommonFiles/Image/arrow_button.gif" /></td>

The problem is evident in the style tags. These tags allow you to describe how that piece of the page should look. First - this is hard to read. Even if it wasn’t in a blog - the long lines are difficult to decode. The BORDER descriptions are identical and they are in there four times (RIGHT, TOP, LEFT, BOTTOM). The dimensions are hard-coded (18px). One of these table elements is blank - it isn’t doing anything. The alt tag is blank. This would make it more difficult for a visually impaired person to understand the page.

Better code:


	<div class="element">
		<label for="sUsername">Username</label>
		<input type="text" name="sUsername" id="sUsername" 
			dojoType="dijit.form.ValidationTextBox"
			required="true"
			trim="true" 
			promptMessage="Enter Username"
		/>
	</div>

This code is easier to understand. The design is handled with CSS, in fact it is transparent. On this page, the HTML would not have to change in order to change the appearance, only the CSS would change.

Granted, this is a comparison of two different types of HTML - one is two cells of a table, the other is a prompt for a username using dojo validation. However, the underlying truth is that if you do a view source and see long, unintelligible lines of code, with lots of style=, you are probably viewing code written by someone with limited technical skill.

Other dead giveaways:

class="one two three four five six seven eight nine ten” - means the author has either made the design too complex or really doesn’t know what they are doing.

<br /> - this is nice XHMTL code. If every
tag has the space and trailing slash, the line breaks were done right.

font="arial” - Author does not understand CSS well.

More help:
http://validator.w3.org/ - Checks a page
http://websiteoptimization.com/ - An excellent resource