semantic code
While it may seem innocuous, one of our fundamental principles as developers is to deliver presentation layers written semantically. What does this mean? Put simply, while it is important to maintain a separation of your presentation layer from your backend application logic, it is equally important to separate your presentation style and layout from your content. Standards-based, semantic code can do just that.
Why is that so important? Poorly written/templated code is difficult to maintain, and presents huge problems in ensuring a good user experience both cross browser and cross platform.
Consider the following two code examples:
<html>
<head>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0"width="100%">
<tr>
<td width="50%" height="400" rowspan="2" valign="top">
<p align="center">
<font face="Arial" color="#FF0000">
<b>Hello World</b>
</td>
</tr>
</table>
</body>
</html>
Not only is this code difficult to read, but its also quite difficult to maintain as it this snippet not only has the content, but also style and positioning elements all in one page. While this may seem to be a good thing, its quite the opposite. Changes made to a global style need to be reflected on each and every page that uses it. Layout changes are also more difficult as there's no telling, without rigorous testing, whether the change will be rendered correctly in all modern browsers.
Now look at this example:
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css" />
</head>
<body>
<div class="container">
<p>Hello World</p>
</div>
</body>
</html>
Now isn't that much easier? Not only is the page smaller and faster to download, but the page is now tableless which will render the page faster in the browser and allow for far greater control over positioning. Also, the style is now firmly separated from the content so site, page, or even element specific style's can be applied.