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.
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 Article copyright 2005 George Peirson
Do you have lots of JavaScript coding in the header section of your web pages Do you re-list your CSS styles at the top of every page Do you have JavaScript coding spread throughout your web pages
If you answered yes to any of these questions your site may be driving away search engine spiders and losing search engine position ranking.
As you can imagine search engine spiders have a lot of pages to get through on the web when they are indexing sites. To improve their speed and efficiency search engines program their spiders to give up easily if they have problems with a page or if they have to wade through too much code to find the relevant content.
This is one of the reasons why it is so important to put your keywords as close to the top of the page as possible. This way the search bot will see the keywords before giving up and moving on to the next page.
But what do you do if you have lots of JavaScript code or CSS styles pushing your keywords down the page in your coding You need to find a way to cut down on all that code that gets in the way of the search engines properly indexing your page.
We do this by moving the JavaScript and CSS styles off the page and into external files. This is a fairly easy and straight forward process and can have the added benefit of making your pages load faster as well, which the search engines also like.
In many ways CSS styles and JavaScript work in a similar fashion. You set up functions in a script or formatting in a style sheet section, and then refer to that section in your html code. For instance if you have a JavaScript that displays a clock on your page you would have the JavaScript functions for the clock listed in your head section, then you would simply call that function from the place on the page where the clock would be displayed.
Similarly with CSS you set up your styles ahead of time in a Styles section of the page head, then you simply refer to the styles as needed in your html coding. One benefit of this is that it cuts down dramatically on the amount of formatting code needed when compared to using Font tags.
If you want to use the same JavaScript or CSS styles on a different page you could copy all that code onto the new page. But this would cause two distinct problems, first you would be adding a lot of code to each page and second if you wanted to make a change to the JavaScript or CSS styles you would need to do so on every page that the code had been copied onto.
Both of these problems can be solved simply by using external files. You create one external file for your CSS and another file for your JavaScript. These could be named mysite.css for the CSS and mysite.js for the JavaScript. These files can be created in any plain text editor or html code editor, they are nothing more than files that contain most of the CSS or JavaScript code from the web pages.
With JavaScript you have an opening JavaScript tag, then a comment tag, then assorted functions and what not, followed by a closing comment tag and a closing JavaScript tag. Your external file would start with the opening comment tag, contain all the functions and such, and end with the closing comment tag. You would leave both the opening and closing JavaScript tags in the html page. If you have more than one JavaScript on the page you can move all the code into one external js file. Simply copy it into the file in the same order as it exists in the JavaScript tags on the html page. You will only need the one pair of opening and closing comment tags.
Once your JavaScript is moved off the page you will need to tell the web page where to find it. This is done in the JavaScript tag that was left on the page in the head section. Right now this will be an opening JavaScript tag placed right up against the closing JavaScript tag, with no additional code in between. You will place the reference to the external JavaScript code inside the opening JavaScript tag like this:
script language=JavaScript type=text/JavaScript src=mysite.js
Placing CSS styles in an external file is handled in exactly the same manner. Move the styles into the external file, and then refer to that external file with your style tag in the head section of the web page like this:
link href=mysite.css rel=stylesheet type=text/css
An added benefit of moving the code into external files is that you can then change the styles of your whole site simply by changing the code in the one external file.
Once you have moved the code into external files you will have greatly simplified the code on each page. This will take you a long way towards making your pages lean and mean, and very search engine friendly.
You can find sample external files for this article on my web site at:
George Peirson is a successful Entrepreneur, Internet Trainer and author of over 30 multimedia based tutorial training titles. Read morearticles by George Peirson at Article copyright 2005 George Peirson