Recommended: Click here to improve PC speed »
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 upyour 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 otherprogramming languages that may be used in a page such as JavaScript. In the codeexamples I will be using (and) characters instead of correct html so that the codeexamples 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 tagswere needed with complete formatting for the new section. More recently we havegained the ability to use Cascading Style Sheets, allowing us to write theformatting 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 pagewhen viewed in an html editor. Since we really do not want to remove any of ourvisible content we need to look to the html code. By cleaning up this code we canremove 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 mainchoices, the (strong) tag and the (b) tag. As you can see the (strong) tag uses 5more characters than the (b) tag, and if we consider the closing tags as well we seethat 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 methodavailable.
HTML has the ability of nesting code within other code. For instance we could have aline with three words where the middle word was in bold. This could be accomplishedby changing the formatting completely each time the visible formatting changes.Consider this code:
(font face= times )This(/font) (font face= times )(strong)BOLD(/s trong)(/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 aWYSIWYG editor. Since the (font) tags are repeating the same information we cansimply nest the (strong) tags inside the (font) tags, and better yet use the (b) taginstead 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. Beaware that WYSIWYG editors will frequently update formatting by adding layer afterlayer of nested code. So while you are cleaning up the code look for redundantnested code placed there by your WYSIWYG editing program.
A big problem with using HTML tags is that we need to repeat the tag coding wheneverwe change the formatting. The advent of CSS allows us a great advantage in cleancoding by allowing us to layout the formatting once in a document, then simply referto it over and over again.
If we had six paragraphs in a page that switch between two different types offormatting, such as headings in Blue, Bold, Ariel, size 4 and paragraph text inBlack, Times, size 2, using tags we would need to list that complete formatting eachtime 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 oncein the Header of the page, and then simply refer to the Style each time we make achange.
(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 simplyreferenced in the Body section. As we add more formatting we would simply continueto 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 anexternal file, thereby reducing the page size even more, and the ability to quicklyupdate 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 sizeand make a fast loading, lean and mean web page.
