WebReference.com - Part 1 of chapter 1 of Cascading Style Sheets: Separating Content from Presentation, from glasshaus (4/5)

[previous] [next]

Cascading Style Sheets

Tables were quickly put to use controlling page layouts; instead of containing tabular data, web authors used tables to contain whole pages. But with no other way to define page layouts, and with an army of web authors arriving on the burgeoning web design scene without an inkling of what a markup language is supposed to be, the <table> quickly became the poster child for abused HTML elements.

In addition, Netscape and Microsoft, still today the dominant web browser makers, engaged in an all out battle to win users to their browser. As the Web rose to prominence in the computing world, the browser quickly became one of the most important pieces of software on a computer. Some said it would replace the OS, others said the Web itself was a new platform. Also, the dot com explosion of the 1990's brought commercial interests to the Web with a force that no well-meaning technologist could combat: the need for companies to maintain a consistent brand image on their new web sites was greater than any concern for the integrity of HTML as a markup language. A better-looking web site was more important than correct markup.

Sensing this need of the commercial web page author to control page presentation, and using that as a way to attract both developers and users to their software, both Microsoft and Netscape encouraged the use of <table> for layout, and introduced a series of HTML extensions such as the abominable <blink> and the obnoxious <marquee>. These elements were, of course, not universally supported, and represented a willful disregard for HTML as a structural markup language. The <blink> element communicates nothing of structural value about the text it tags; it merely instructs the Netscape browser on how to display it.

Perhaps the worst of all such extensions, however, was the most egregious <font> element. Although all browsers support the tag today, which allows a web author to define the color, size and typeface for text, its use encourages the common thinking that HTML is intended to communicate document presentation. Combine the <font> element with the <table> element, and the fact that the once dominant Netscape browser did not carry <font> specifications into <table> elements, and you find the explanation for the morass of markup, nearly devoid of structural information, that passes for an HTML document even today. As an example of the muddied markup I am talking about, I found the following markup within about five minutes of looking on the home page of a major web site (it has been modified to protect the guilty):

<TABLE BORDER=0 CELLPADDING=2 CELLSPACING=2>
  <TR VALIGN=TOP>
    <TD BGCOLOR=#FFFFFF WIDTH="33%" ALIGN=LEFT>
      <FONT FACE="Verdana, Arial, Helvetica, sans-serif" SIZE=1 CLASS="s1cB">
        <A HREF="https://example.com">
          <NOBR>
            <B>Dow</B>
          </NOBR>
        </A>
      </FONT>
    </TD>
    <TD BGCOLOR=#FFFFFF WIDTH="33%" ALIGN=RIGHT>
      <FONT FACE="Verdana, Arial, Helvetica, sans-serif" SIZE=1 CLASS="size1">
         9698.30
      </FONT>
    </TD>
    <TD BGCOLOR=#FFFFFF WIDTH="33%" ALIGN=RIGHT>
      <FONT FACE="Verdana, Arial, Helvetica, sans-serif" SIZE=1 CLASS="size1">
        <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
        setFontColor(11.21);</SCRIPT>
          11.21
        </FONT>
      </FONT>
    </TD>
  </TR>
  <TR VALIGN=TOP>
    <TD BGCOLOR=#FFFFFF WIDTH="33%" ALIGN=LEFT>
      <FONT FACE="Verdana, Arial, Helvetica, sans-serif" SIZE=1 CLASS="s1cB">
        <A HREF="https://example.com"><NOBR><B>Nasdaq</B></NOBR></A>
      </FONT>
    </TD>
    <TD BGCOLOR=#FFFFFF WIDTH="33%" ALIGN=RIGHT>
      <FONT FACE="Verdana, Arial, Helvetica, sans-serif" SIZE=1 CLASS="size1">
        1850.43
      </FONT>
    </TD>
    <TD BGCOLOR=#FFFFFF WIDTH="33%" ALIGN=RIGHT>
      <FONT FACE="Verdana, Arial, Helvetica, sans-serif" SIZE=1 CLASS="size1">
        <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
        setFontColor(-5.10);</SCRIPT>
          -5.10
        </FONT>
      </FONT>
    </TD>
  </TR>
  <TR VALIGN=TOP>
    <TD BGCOLOR=#FFFFFF WIDTH="33%" ALIGN=LEFT>
      <FONT FACE="Verdana, Arial, Helvetica, sans-serif" SIZE=1 CLASS="s1cB">
        <A HREF="https://example.com">
          <NOBR>
            <B>S&amp;P 500</B>
          </NOBR>
        </A>
      </FONT>
    </TD>
    <TD BGCOLOR=#FFFFFF WIDTH="33%" ALIGN=RIGHT>
      <FONT FACE="Verdana, Arial, Helvetica, sans-serif" SIZE=1 CLASS="size1">
        1092.50
      </FONT>
    </TD>
    <TD BGCOLOR=#FFFFFF WIDTH="33%" ALIGN=RIGHT>
      <FONT FACE="Verdana, Arial, Helvetica, sans-serif" SIZE=1 CLASS="size1">
        <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
        setFontColor(-1.94);</SCRIPT>
          -1.94
        </FONT>
      </FONT>
    </TD>
  </TR>
  <TR VALIGN=BOTTOM>
    <TD COLSPAN=3 ALIGN=CENTER>
      <FONT FACE="Verdana, Arial, Helvetica, sans-serif" SIZE=1 COLOR=#003366 CLASS="s1cB">
        Quotes delayed by 20 minutes.
      </FONT>
    </TD>
  </TR>
</TABLE>

Notice that a total of 2454 characters are used to display a grand total of less than 60 characters worth of actual content. Such is the state of modern markup without CSS.

[previous] [next]

Created: June 10, 2002
Revised: June 10, 2002

URL: https://webreference.com/authoring/style/sheets/cssseparate/chap1/1/4.html