Simple, Clean HTML Code

Server Side Includes and Cascading Style Sheets (CSS) enable web page content to be user edited, even with very limited technical background. The code below (a sample from Sastrugi's title revision page), permits simple editing to correct spelling errors or update content without a WYSIWYG editor or a knowledge of HTML.

In addition to easy maintenance, some in the SEO community believe concise web sites do better in search engine results: The clean code suggests professional web design, and the Search Engine robots don't spend their "search budget" wading through irrelevant coding trivia to index content.

The code below generates an entire web page with several paragraphs, about 30 links to other pages, and a variety of graphic elements. However, it's fairly obvious where the content on the page is, and it could be safely changed by anyone with typing skills and common sense. Therefore, it's more likely to be maintained and updated.

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>Title Revision</title>
5 <meta name="description" content="Web Page Title Revision - Sastrugi Marketing" />
6 <meta name="keywords" content="Web Page, Page Title, Title Revision, SEO" />
7 <?php include("header.php"); ?>
8 <h1>Web Page Title Revision</h1>
9
10 <p>Most web pages have titles - All should have titles! The title appears in the blue bar at
11 the upper left hand corner of the page in Windows Internet Explorer and in the same location
12 in most browsers. Search Engines look at titles!</p>
13
14 <p>Many websites the company name or a generic title on all pages. Or, worse, the titles
15 are "navigational" words, such as "about us," or "contact" that are seldom used in search
16 strings. If you want a pizza delivered, you don't search on "contact information!" You'd
17 search on "Pizza Delivery Littleton, CO." Page titles should reflect probable search terms.
18 For example, if your company, Acme Company, located in Highlands Ranch, Colorado, sells
19 XYZ brand Widgets, and you have a page devoted to XYZ Widget descriptions, pricing,
20 availability, the title should probably be:</p>
21
22 <p>XYZ Widgets - Highlands Ranch, CO - Serving Denver Metro and Colorado.</p>
23
24 <p>This title will help boost your search rankings on probable search phrases like:<br />
25 "Widgets Colorado"<br />
26 "Colorado Widgets" <br />
27 "XYZ Widget Delivery Highlands Ranch"</p>
28
29 <p>Additionally, this Title clarifies what the company sells and where it is located.
30 This information generally appears as titles in Search Engine Results Pages, so it's
31 important to generate click-throughs from customers who want
32 to buy widgets in Highlands Ranch or nearby areas .</p>
33
34 <p>The presence of keywords in the title was ranked in a 2009 survey of SEO professionals
35 as the third most important factor in Search Engine Optimization. It's easy, and
36 every website should have a good Page Title!</p>
37 <?php include("header.php"); ?>

In contrast, some web sites use antiquated styles of coding that turn the website into a confusing minefield that must be edited a high-level HTML and CSS expert with a full pot of coffee. Look a sample of the code from a 1000-lines-of-code old school web page below (a few changes made to the content and file names to keep them anonymous - I couldn't improve on their code to make my point!):

<p align="justify"><font color="#000000" size="3">Traditional Web Design
specializes in mind games </font><font color="#1e1e1e" size="3">that reflects the
beauty and culture of the chaos. Including </font><font color="#000080" size="3"><a href="#mildlife"><font color="#0000ff">
Kleenex </font></a></font><font color="#000080"><font size="3">, </font><font size="3"><a href="c-151-.aspx"><font color="#000080">
Native HTML Confusion </font></a></font><font size="3">, </font></font><a href="c-134-unstructred-cows.aspx"><font color="#000080" size="3"><font color="#000080">
Silly Products </font>Art </font></a><font color="#000080" size="3">, </font><font color="#000080" size="3"><a href="#party"><font color="#0000ff">
Art </font></a></font><font color="#000080" size="3">,  <font color="#000000">
and </font></font><a href="s-53x-hopping-mad.aspx"><font color="#000080" size="3">
Silly Sculptured </font></a><font color="#1e1e1e"><font size="3">.  In
addition to our limited edition stuff we have a pile of premium <a href="s-826-crap-guide.aspx"><font color="#000080">
junk </font></a>for every tiresome occasion.  <font color="#000080"><font color="#000000">
Read More About Us and Our Store in Tag Soup </font><a href="t-about.aspx"><font color="#000080">
here </font></a></font>. <br></font></font></p></td></tr></tbody></table></div>
</td></tr>
</tbody></table> </td>
</tr>
<tr>
<td height="14>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td class="bg3" valign="top" width="537">
<table cellpadding="0" cellspacing="0" width="537">
<tbody>
<tr>
<td valign="top" width="20">
<img src="skins/skin_1/images/m28.gif" height="174" width="21"></td>
<td valign="top" width="527">
<table border="0" cellpadding="0" cellspacing="0" width="99%">
<tbody>
<tr>
<td valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="57">
<tbody>
<tr>
<td height="20">
</td>
</tr>
<tr>
<td height="12">
<style type="text/css">