Article printed from SiteProNews: http://www.sitepronews.com
  HTML version available at: http://www.sitepronews.com/archives.html

The Three Principles of HTML Code Optimization
By George Peirson (c) 2006

Just like spring cleaning a house, the html code of your web
pages should get periodic cleaning as well. Over time, as
changes and updates are made to a web page, the code can become
littered with unnecessary clutter, slowing down page load times
and hurting the efficiency of your web page. Cluttered html can
also seriously impact your search engine ranking.

This is especially true if you are using a WYSIWYG (What You See
Is What You Get) web design package such as FrontPage or
Dreamweaver. These programs will speed up your web site
creation, but they are not that efficient at writing clean html
code.

We will be focusing this discussion on the actual html coding,
ignoring other programming languages that may be used in a page
such as JavaScript. In the code examples I will be using ( and )
characters instead of correct html so that the code examples
will display properly in this newsletter.

Up until recently when coding a page in HTML we would be using
tags such as the (font) tag and (p) paragraph tags. Between
these tags would be our page content, text, images and links.
Each time a formatting change was made on the page new tags were
needed with complete formatting for the new section. More
recently we have gained the ability to use Cascading Style
Sheets, allowing us to write the formatting once and then refer
to that formatting several times within a web page.

In order to speed up page load times we need to have fewer
characters on the page when viewed in an html editor. Since we
really do not want to remove any of our visible content we need
to look to the html code. By cleaning up this code we can remove
characters, thereby creating a smaller web page that will load
more quickly.

Over time HTML has changed and we now have many different ways
to do the same thing. An example would be the code used to show
a bold type face. In HTML we have two main choices, the (strong)
tag and the (b) tag. As you can see the (strong) tag uses 5 more
characters than the (b) tag, and if we consider the closing tags
as well we see that using the (strong)(/strong) tag pair uses 10
more characters than the cleaner (b)(/b) tag pair.

This is our First Principle of clean HTML code: Use the simplest
coding method available.

HTML has the ability of nesting code within other code. For
instance we could have a line with three words where the middle
word was in bold. This could be accomplished by changing the
formatting completely each time the visible formatting changes.
Consider this code:

(font face="times")This(/font)

(font face="times")(strong)BOLD(/strong)(/font)

(font face="times")Word(/font) This takes up 90 characters.

This is very poorly written html and is what you occasionally
will get when using a WYSIWYG editor. Since the (font) tags are
repeating the same information we can simply nest the (strong)
tags inside the (font) tags, and better yet use the (b) tag
instead of the (strong) tag. This would give us this code (font
face="times)This (b)BOLD(/b) Word(/font), taking up only 46
characters.

This is our Second Principle of clean HTML code: Use nested
tags when possible. Be aware that WYSIWYG editors will
frequently update formatting by adding layer after layer of
nested code. So while you are cleaning up the code look for
redundant nested code placed there by your WYSIWYG editing
program.

A big problem with using HTML tags is that we need to repeat the
tag coding whenever we change the formatting. The advent of CSS
allows us a great advantage in clean coding by allowing us to
layout the formatting once in a document, then simply refer to
it over and over again.

If we had six paragraphs in a page that switch between two
different types of formatting, such as headings in Blue, Bold,
Ariel, size 4 and paragraph text in Black, Times, size 2, using
tags we would need to list that complete formatting each time we
make a change.

(font face="Ariel" color="blue" size="4")(b)Our heading(/b)
(/font)

(font face="Times color="black" size="2")Our paragraph(/font)

(font face="Ariel" color="blue" size="4")(b)Our next heading(/b)
(/font)

(font face="Times color="black" size="2")Our next paragraph
(/font)

We would then repeat this for each heading and paragraph, lots
of html code.

With CSS we could create CSS Styles for each formatting type,
list the Styles once in the Header of the page, and then simply
refer to the Style each time we make a change.

(head)

(style type="text/css")

(!--

.style1 {

        font-family: Arial, Helvetica, sans-serif;

        font-weight: bold;

        font-size: 24px;

}

.style2 {

        font-family: "Times New Roman", Times, serif;

        font-size: 12px;

}

--)

(/style)

(/head)

(body)

(p class="style1")Heading(/p)

(p class="style2")Paragraph Text(/p)

(/body)

Notice that the Styles are created in the Head section of the
page and then simply referenced in the Body section. As we add
more formatting we would simply continue to refer to the
previously created Styles.

This is our Third Principle of Clean HTML Code: Use CSS styles
whenever possible. CSS has several other benefits, such as being
able to place the CSS styles in an external file, thereby
reducing the page size even more, and the ability to quickly
update formatting site-wide by simply updating the external CSS
Style file.

So with some simple cleaning of your HTML code you can easily
reduce the file size and make a fast loading, lean and mean web
page.
================================================================
George Peirson is a successful Entrepreneur and Internet
Trainer. He is the author of over 30 multimedia based tutorial
training titles covering such topics as Photoshop, Flash and
Dreamweaver. To see his training sets visit
http://www.howtogurus.com Article copyright 2005 George Peirson
================================================================

Copyright © 2006 Jayde Online, Inc.  All Rights Reserved.

SiteProNews is a registered service mark of Jayde Online, Inc.