Improving HTML: Worst Example I’ve Ever Seen
We’ve all written code like this at one time or another. For many of us, its how we got our start.
1 <html>
...
192 <td>
193 <center>
194 <a href="javascript:;" onClick="MM_openBrWindow('118.htm','','width=500,height=333')"><img SRC="images/s118.jpg" BORDER=1 height=147 width=220></a>
195 <br>
196 <b><font face="Verdana, Arial, Helvetica, sans-serif"><font size=-1>WC118 </font></font></b></center> </td>
197 </tr>
Format: The line #: The issue (the rule)
- Indentation missing
- Line 001: Doctype declaration (required)
- Line 192: tables used for layout (tabular data)
- Line 193: <center> tag used (layout)
- Line 194: useless “javascript:” link (sans-js)
- Line 194: “onClick” event handler (statically defined inline)
- Line 194: event function returns nothing (prevent default behaviour)
- Line 194: UPPERCASE tagname(s) and inconsistency (coding style)
- Line 195: <br> tag (layout)
- Line 196: <b> tag (deprecated, visual)
- Line 196: <font face=" (deprecated, visual)
- Line 197: </tr> tag (tabular data)
Re-written with improvements of poorly constructed markup and ideas.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript"><!-- // onload
window.onload=function(){
var functRef = function() { MM_openBrWindow(this.href,'','width=500,height=333'); return false; };
document.getElementById('products').getElementsByTagName('a').onclick = functRef;
// --> }
</script>
<style type="text/css">
#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; }
</style>
</head>
<body>
...
<ul id="products">
<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>
...
</body>
</html>
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.
