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
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
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
the browser terminates a paragraph when it sees a tag that starts the
An example of deprecated HTML is using tables to control layout
(how text and images would appear in relation to each other on pages).
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.
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
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
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,
and who knows what to come.
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
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
that looks good in every version of every type of browser in common
There are a number of web sites that compare available browsers.
Firefox frames the thumbnail nicely based on the CSS we have used for
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"
for the image is displayed.
Opera uses lighter colors to shade the frame.
the frame style is no longer recognizable,
and another version of "blue" is used.
Don't use Safari!
don't use Safari!