|
|
|
The Three Principles Of HTML Code Optimization
ust like spring cleaning a html so that the code examples
house, the html code of will display properly in this
your web pages should get newsletter.
periodic cleaning as well. Over
time, as changes and updates are Up until recently when coding a
made to a web page, the code can page in HTML we would be using
become littered with unnecessary tags such as the (font) tag and
clutter, slowing down page load (p) paragraph tags. Between these
times and hurting the efficiency tags would be our page content,
of your web page. Cluttered html text, images and links. Each time
can also seriously impact your a formatting change was made on
search engine ranking. the page new tags were needed
with complete formatting for the
This is especially true if you new section. More recently we
are using a WYSIWYG (What You See have gained the ability to use
Is What You Get) web design Cascading Style Sheets, allowing
package such as FrontPage or us to write the formatting once
Dreamweaver. These programs will and then refer to that formatting
speed up your web site creation, several times within a web page.
but they are not that efficient
at writing clean html code. In order to speed up page load
times we need to have fewer
We will be focusing this characters on the page when
discussion on the actual html viewed in an html editor. Since
coding, ignoring other we really do not want to remove
programming languages that may be any of our visible content we
used in a page such as need to look to the html code. By
JavaScript. In the code examples cleaning up this code we can
I will be using ( and ) remove characters, thereby
characters instead of correct creating a smaller web page that
will load more quickly.
(font face="times")This(/font)
Over time HTML has changed and we (font
now have many different ways to face="times")(strong)BOLD(/strong
do the same thing. An example )(/font)
would be the code used to show a (font face="times")Word(/font)
bold type face. In HTML we have This takes up 90 characters.
two main choices, the (strong)
tag and the (b) tag. As you can This is very poorly written html
see the (strong) tag uses 5 more and is what you occasionally will
characters than the (b) tag, and get when using a WYSIWYG editor.
if we consider the closing tags Since the (font) tags are
as well we see that using the repeating the same information we
(strong)(/strong) tag pair uses can simply nest the (strong) tags
10 more characters than the inside the (font) tags, and
cleaner (b)(/b) tag pair. better yet use the (b) tag
instead of the (strong) tag. This
This is our First Principle of would give us this code (font
clean HTML code: Use the face="times)This (b)BOLD(/b)
simplest coding method available. Word(/font), taking up only 46
characters.
HTML has the ability of nesting
code within other code. For This is our Second Principle
instance we could have a line of clean HTML code: Use
with three words where the middle nested tags when possible. Be
word was in bold. This could be aware that WYSIWYG editors will
accomplished by changing the frequently update formatting by
formatting completely each time adding layer after layer of
the visible formatting changes. nested code. So while you are
Consider this code: cleaning up the code look for
redundant nested code placed size="4")(b)Our next
there by your WYSIWYG editing heading(/b)(/font)
program. (font face="Times color="black"
size="2")Our next
A big problem with using HTML paragraph(/font)
tags is that we need to repeat
the tag coding whenever we change We would then repeat this for
the formatting. The advent of CSS each heading and paragraph, lots
allows us a great advantage in of html code.
clean coding by allowing us to
layout the formatting once in a With CSS we could create CSS
document, then simply refer to it Styles for each formatting type,
over and over again. list the Styles once in the
Header of the page, and then
If we had six paragraphs in a simply refer to the Style each
page that switch between two time we make a change.
different types of formatting,
such as headings in Blue, Bold, (head)
Ariel, size 4 and paragraph text (style type="text/css")
in Black, Times, size 2, using (!--
tags we would need to list that .style1 {
complete formatting each time we font-family: Arial,
make a change. Helvetica, sans-serif;
font-weight: bold;
(font face="Ariel" color="blue" font-size: 24px;
size="4")(b)Our }
heading(/b)(/font) .style2 {
(font face="Times color="black" font-family: "Times New
size="2")Our paragraph(/font) Roman", Times, serif;
(font face="Ariel" color="blue" font-size: 12px;
} This is our Third Principle of
--) Clean HTML Code: Use CSS
(/style) styles when ever possible. CSS
(/head) has several other benefits, such
(body) as being able to place the CSS
(p class="style1")Heading(/p) styles in an external file,
(p class="style2")Paragraph thereby reducing the page size
Text(/p) even more, and the ability to
(/body) quickly update formatting
site-wide by simply updating the
Notice that the Styles are external CSS Style file.
created in the Head section of
the page and then simply So with some simple cleaning of
referenced in the Body section. your HTML code you can easily
As we add more formatting we reduce the file size and make a
would simply continue to refer to fast loading, lean and mean web
the previously created Styles. 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
Read more articles by: George Peirson
Article Source: www.iSnare.com
|
|
