Continued from page 1
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 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 tag coding whenever we change formatting. The advent of CSS allows us a great advantage in clean coding by allowing us to layout 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 Styles once in Header of page, and then simply refer to 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 Styles are created in Head section of page and then simply referenced in Body section. As we add more formatting we would simply continue to refer to 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 CSS styles in an external file, thereby reducing page size even more, and ability to quickly update formatting site-wide by simply updating external CSS Style file.
So with some simple cleaning of your HTML code you can easily reduce 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 www.howtogurus.com Article copyright 2005 George Peirson