Web Page Evolution

Want to see some HTML? Just right click on this page and select "View Page Source" (or whatever similar wording your browser uses). Some of the text you will see corresponds to the text on this page. Everything else is HTML that controls how the text appears on the screen.

It is estimated that well over 60% of pages on the web use poorly formed or deprecated HTML . One historical reason for sloppy HTML is the low bandwidth available to most early web users. It was common to design and implement for users who had 56Kb modems. This meant keeping the HTML to a minimum, using few images and keeping images small in order to keep data transfer time down. One of the common ways to decrease the HTML size was to take advantage of the robustness of browsers by eliminating HTML tags in situations where the browser would "recover" by doing something reasonable. A simple example of this is leaving out the tag that terminates a paragraph: the browser terminates a paragraph when it sees a tag that starts the next paragraph. An example of deprecated HTML is using tables to control layout (how text and images would appear in relation to each other on pages).

So, what changed to make these practices undesirable? There are a number of factors in this evolution.

Comparing Browsers

Every web page is likely to have a different appearance depending on what browser is used. The screen shot cut-outs below are examples of some minor differences in this quarter's pages, all using the same HTML and CSS. It is quite easy to come up with examples that would produce nice looking pages for one browser and unusable garbage for another. So the trick is to find the combination of HTML and CSS (and maybe some JavaScript and AJAX ) that looks good in every version of every type of browser in common use. Good Luck!

There are a number of web sites that compare available browsers. For example, here and here .


Firefox frames the thumbnail nicely based on the CSS we have used for our page.


When the thumbnail is selected, the frame changes color, but the style is still recognizable.


Internet Explorer uses darker colors to shade the frame.


When the thumbnail is selected, the frame style is no longer recognizable. Also note that the "alternate text" (49KB) for the image is displayed.


Opera uses lighter colors to shade the frame.


Again, the frame style is no longer recognizable, and another version of "blue" is used.

Don't use Safari!

Again, don't use Safari!