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 when ever 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.
About the author:
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
www.howtogurus.com Article copyright 2005 George Peirson
