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.

• One of the most obvious factors is that most people now have access to much more bandwidth. This means that there is less concern about size of pages. Especially considering the increased use of graphics, HTML represents a very small proportion of the web page size, so trying to reduce its size is rarely worthwhile.
• Next, the sheer quantity of content being produced required tools to help automate the process. It is much easier to have these tools follow good practice than for humans to.
• Standards were created to improve the automation of things like layout. As an example, it is not feasible to have tools automate layout with tables (this is one of those things humans can do better than computers), so Cascading Style Sheets (CSS) were devised.
• Finally, the number and type of displays for web-based information expanded. Good web design targets a "best effort" display device. That is to say, the display device is expected to do its best to display what the author means on the device that is available. That problem is already difficult when all one has to worry about is a variety of relatively large screen sizes, but now one also has to worry about printers, Blackberries, cell phones, and who knows what to come. Again, tables are a good example: tables should not be not be abused as layout ruses so better decisions can be made about the display of data when a table is in fact called for.

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!