Several principles of HTMLApril 21, 2006

Here I describe the principles I follow writing HTML scripts. Of course, there are some exceptions, but they are few and very specific.

So, lets examine the following fragment that can serve as a real example:

01 
02 
03 
04 
05 
06 
07 
08 

<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#000000">
	<tr>
		<td width="67%"></td>
		<td width="33%" valign="top">
			<p class="small_body">Content with left margin</p>
		</td>
	</tr>
</table>
				

Use HTML elements according to their purpose 

To include hyperlinks within text, use a elements rather than span and a set of event handlers, because you don’t need to emulate browser behavior.

Some might say this radical example doesn’t demonstrate it too well, so lets examine the sample above. There is expression <p class="small_body">...</p>. The purpose is to display text in a font smaller than that of the main body. There sure are many alternatives, but I suggest using special element small that does exactly what’s needed.

Besides, the p element that defines paragraphs is a block element and has vertical spacing which is not always required.

So, it comes to this:

01 
02 
03 
04 
05 
06 
07 
08 

<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#000000">
	<tr>
		<td width="67%" valign="top"></td>
		<td width="33%" valign="top">
			<small>Content with left margin</small> 
		</td>
	</tr>
</table>
				

Pick out repetitious CSS elements 

When writing a script I assume that the shorter is the code, the better—it enhances readability and structurabity and speeds up loading of the page. And the first thing to cut down on is repetitious HTML attributes. In the sample it’s td/@valign and, on a larger scale, all attributes (except for bgcolor) of the table element, because 90% of the time programmers use <table border="0" cellpadding="0" cellspacing="0" width="100%">. Therefore, the script can be rewritten the following way

01 
02 
03 
04 
05 
06 
07 
08 

<table bgcolor="#000000">
	<tr>
		<td width="67%"></td>
		<td width="33%">
			<small>Content with left margin</small>
		</td>
	</tr>
</table>
				

and the CSS part:

01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 

table
{
	border-collapse: collapse;
	width: 100%;
}

td
{
	margin: 0em;
	padding: 0em;
	vertical-align: top;
}
				

And you should pay attention to browser cache and keep in mind that in most cases a ten-kilobyte HTML script takes twice as much time to load that does a five-kilobyte HTML with three kilobytes of CSS.

Simplify the code to the limit 

The idea is pretty much the same as in “Use HTML elements according to their purpose” only in a more general sense.

If you study the script carefully, you will see that the programmer meant to shift text “Content with left margin” to the right. To do that, he used a blank table cell with fixed width. In my opinion, there are better techniques. For example, using div with padding defined through CSS:

01 
02 
03 

<div style="padding-left:67%; background:#000000;">
	<small>Content with left margin</small>
</div>
				

I believe this is the most simple and reasonable approach to the initial task, and that’s the goal.