Just like spring cleaning a house,
html code of your web pages should get periodic cleaning as well. Over time, as changes and updates are made to a web page,
code can become littered with unnecessary clutter, slowing down page load times and hurting
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
actual html coding, ignoring other programming languages that may be used in a page such as JavaScript. In
code examples I will be using ( and ) characters instead of correct html so that
code examples will display properly in this newsletter.
Up until recently when coding a page in HTML we would be using tags such as
(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
page new tags were needed with complete formatting for
new section. More recently we have gained
ability to use Cascading Style Sheets, allowing us to write
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
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
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
same thing. An example would be
code used to show a bold type face. In HTML we have two main choices,
(strong) tag and
(b) tag. As you can see
(strong) tag uses 5 more characters than
(b) tag, and if we consider
closing tags as well we see that using
(strong)(/strong) tag pair uses 10 more characters than
cleaner (b)(/b) tag pair.
This is our First Principle of clean HTML code: Use
simplest coding method available.
HTML has
ability of nesting code within other code. For instance we could have a line with three words where
middle word was in bold. This could be accomplished by changing
formatting completely each time
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
(font) tags are repeating
same information we can simply nest
(strong) tags inside
(font) tags, and better yet use
(b) tag instead of
(strong) tag. This would give us this code (font face=”times)This (b)BOLD(/b) Word(/font), taking up only 46 characters.