For this step we will be looking at the home page only but the work described here will be applied to all the other pages later on. The HTML statements to include the CSS files have been removed so the page will look different. All text formatting has been removed and replaced for the moment with paragraph commands. We will look to replace some of them with heading commands such as <h1> and <h2> etc at a later stage. Search engines like heading tags, it gives emphasis on the words used within the tag and will help with ranking. Search Engine Optimization should be considered at this early stage.

View the original version
View the version discussed in this step

One of the main problems with code generated by the Mister Site software is the overlapping HTML tags and the depth they go to. Lets take a look at the following...

<li><font size="5"><span style="font-size: 12pt;"><strong><span style="font-size: 12pt;"><strong><span style="font-size: 12pt;"><strong><span style="font-size: 12pt;"><strong><span style="font-size: 12pt;"><strong><span style="font-size: 12pt;"><strong><span style="font-size: 12pt;">Estate agency:</span></strong><span style="font-size: 14pt;"> </span></span></strong></span></strong></span></strong></span></strong></span></strong><span style="font-size: 12pt;">translation of contracts and legal documents.</span></span></font></li>

If you look hard enough at the code above you will see 'translation of contracts and legal documents' buried deep in tags. This could be replaced with a single HTML tag so the code would end up as <li>translation of contracts and legal documents</li>

Also featured in the code are repeated mixed commands to change font...

<p><strong><strong><font size="5"><span style="font-size: 12pt;"><strong> </strong></span></font></strong></strong></p> <p><strong><strong><font size="5"><strong><br /> </strong></font></strong></strong></p> <p><span style="font-size: 14pt;"><strong><strong><font size="5"><strong>My qualifications<br /> </strong></font></strong></strong></span></p>

The FONT tag is used followed by a SPAN command with embedded CSS. While it may achieve the look required, it can be reduced to a simple paragraph with and if it needs to look different to others then the tag can be modified, for example <p class="different”>

In the last section of the home page, there are 32 lines of commands to change font size etc. No text at all to be display, just redundant code!

The home page (index.htm) is now down to 6.5Kb in size, before is was 19.69Kb. That is now a saving of 13.19Kb already, before we have removed any code for page structure.

So to recap on what has been done so far

• All CSS formatting has been removed and replaced with <p>tags.

• Redundant code has been removed where possible

In the next part of this project, we will remove the HTML that creates the structure of the page, leaving behind something that should pass validation.