Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Markup

Last updated Oct 17, 2003.

Cleaning up HTML or XHTML markup is a simple way to shrink a file. There are many tricks for spring cleaning the markup, and these are just a few to try. Start by adding the DOCTYPE declaration, which is short for Document Type Declaration (DTD). Declarations indicate which version of HTML/XHTML is used and they're included at the top of the page. The DOCTYPE ensure the browser properly renders the Web document. An example of a DOCTYPE for XHTML Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

W3C provides a list of all the available DOCTYPES.

With the hard part over, the simple action of tightening the markup by removing spaces and tabs lightens the load. Trashing comments also helps the page lose weight. These are tough for designers to give up because white space makes it easier to read the markup, but it does also increase the file size. Comments help others know what is going on. A possible way around this is to save a copy of the code and delete all the white space and comments on the production version.

Dumping <font> and other redundant tags and attributes are another space saver. Why use <font> when CSS is available and easier to use when you decide to change the font style or color for an entire Web site? If you decide you want to change the font, you have to comb every Web page for the <font> tag to make the change. Instead, put the font information into a style sheet and you'll reduce the number of places to update whenever making a font change.

The heavy way:

<font face="Verdana" color="#ffffff" size="1">Let's get rid of font tags.</font>

The lighter way:

<style type="text/css">
<!—
body {
     font-family: verdana, arial, sans-serif;
     font-size: 1em;
     color: #ffffff;
}

The lighter way can be smaller, but elimination the white spaces and hard returns. Also, the color can be shortened to #fff. RGB triplets can be reduced from six digits to three. A triplet has a pattern: ##XX%%. # represents R, X represents G, and % represents B.

Save more space by shortening <alt> descriptions, file names, and CSS class sectors. Instead of using text as a graphic, use it as text. It'll be one less HTTP request. Remember every image on a page is an HTTP request.