|Website Workshop: HTML|
Coding: Optimizing your HTML
1) Nested Tables
Try these figures on for size:
That's right, from an unbearable 40 second download on a major page of the seeUthere.com site, to only 5 seconds. I pared down the bloated excess code, eliminated a few hundred lines of unnecessary whitespace (which is still processed by the browser, though it's not displayed), and that helped quite a bit.
The document weights above don't even include 76KB worth of images, that's 53KB just of *text* on the original page (the recommended average page weight with images is about 30KB!)
But the drastic increase in download speed is mainly caused by reducing the number of maximum nested tables on this page from seven to four, and most of those tables are located within the grid. If you are about to open another table within a table, think about it first. Can you structure things differently? Can you stack tables on top of another rather than within one another? It takes a bit of thinking about spatial relationships, but there is almost no reason on Earth why you need to nest tables seven layers deep.
Rather than adding another table just so that you can have a box around your data, why not space it out properly from everything else on the page so that the extra box and table can be eliminated?
Here is an example of an optimized grid page with several layers of nested tables removed.
2) Escape Characters
You can find a list of HTML escape characters in any HTML reference text or in many places online.
3) Elements, Attributes & Case
XHTML is another story. It has been developed (see the 1.0 standard at http://www.w3.org/TR/xhtml1/ to expand HTML to accommodate future XML extensions. You can use it right now if you like! It's basically strictly conforming HTML, so if you had some idea that in the future browsers would be able to take any jumble of text that even remotely resembles a web page and be able to interpret it correctly for you, you're wrong. We're actually moving in the opposite direction, where developers need to be able to write clean strict HTML.
In XHTML all elements and attributes must be in lower case, so it's a good idea to start doing this now. In addition, it makes a document easier to work on if everyone folows the same convention. Reading code in a page where half the elements are in uppercase and half in lowercase is confusing. If everyone uses lowercase for both elements and attributes, that just makes things easier overall.
4) Indenting Vertically
Horizontal indentation also creates a lot of extra whitespace in the code, which still has to be processed by the browser, though it is not displayed. This adds to the document weight.
The third reason not to do it is that browsers have problems with too many spaces within tables and can display weird spacing in the actual page because they choke on all the whitespace within a table. The most notorious of these problems is one caused by a </td> tags being placed on the next line down from the content that it closes. We'll talk about that more below...
And the last reason is that it is a whole extra process to keep up with the indenting system already present when you are making changes to a page. How many tabs do you need to move your content over by? Where did the last table on that level close? Can you even keep track? Are there already lots of mistakes in the indenting system?
It's much easier to just bring everything over to the left margin and go from there.
Here's an example of a simple nested table, indented vertically
<!-- Main Page container table opens-->