Chovy's Blog

 <td>

 <a href=";"><img SRC="images/s118.jpg" BORDER="1" height="147" width="220"></a>
 <br>
 <b><font face="Verdana, Arial, Helvetica, sans-serif"><font size="-1">WC118 </font></font></b> </td>
 </tr>

Format: The line #: The issue (the rule)

1. Indentation missing
2. Line 001: Doctype declaration (required)
3. Line 192: tables used for layout (tabular data)
4. Line 193: <center> tag used (layout)
5. Line 194: useless “javascript:” link (sans-js)
6. Line 194: “onClick” event handler (statically defined inline)
7. Line 194: event function returns nothing (prevent default behaviour)
8. Line 194: UPPERCASE tagname(s) and inconsistency (coding style)
9. Line 195: <br> tag (layout)
10. Line 196: <b> tag (deprecated, visual)
11. Line 196: <font face=" (deprecated, visual)
12. Line 197: </tr> tag (tabular data)

Re-written with improvements of poorly constructed markup and ideas.

   #products { list-style-type: none; font-family: Verdana, Arial, Helvetica, sans-serif; }
   #products li { width: 200px; float: left; text-align: center; font-weight: bold; }
   #products img { border: none; }

<ul>
    <li><a href="118.htm"><img src="images/s118.jpg" alt="Product ID: 118" /></a><br /><a href="118.htm">WC118</a></li>
    <li><a href="119.htm"><img src="images/s119.jpg" alt="Product ID: 119" /></a><br /><a href="119.htm">WC119</a></li>
</ul>

Presentation / Design

Redesigns will be much easier next time around, in theory only having to change the stylesheet file (I defined it local in above, but typically that would be referenced inside a file).

Behavior

Javascript is no longer a requirement for the site to work (this will become more of an issue as the XSS vulnerability word gets out, especially for sites that contain sensitive data).

Structure

Although clearly more markup (about double), we gained a few advantages by removing all the design and behavior attributes and tags. They tend to clutter up the markup, hurting readability. On larger pages and sites with heavy traffic, less data will be sent back by the server once the stylesheet and javascript libraries have been cached — vastly improving the load time on subsequent requests.