Andrea's Blogger Templates

The early Web was little more than a series of interlinked research documents using HTML to add basic formatting and structure. However, as the World Wide Web gained in popularity, HTML started being used for presentational purposes. Instead of using heading elements for page headlines, people would use a combination of font and bold tags to create the visual effect they wanted. Tables got co-opted as a layout tool rather than a way of displaying data, and people would use blockquote to add whitespace rather than to indicate quotations. Very quickly, the Web lost its meaning and became a jumble of font and table tags. Web designers came up with a name for this kind of markup; they called it tag soup (see Figure below).

As web pages became more and more presentational, the code became increasingly difficult to understand and maintain. WYSIWYG (What You See Is What You Get) editors offered authors an escape from these complexities and promised a brave new world of visual layout. Unfortunately, rather than making things simpler, these tools added their own complicated markup to the mix. Editors like FrontPage or Dreamweaver allowed users to build complex table layouts at the click of a button, cluttering the code with nested tables and “spacer GIFs” (see Figure 1-2). Sadly, these layouts were extremely fragile and prone to breaking. Because the markup was littered with meaningless code, it was easy to delete the wrong tag and watch the whole layout crumble. Furthermore, due to the complexity of the code, bug hunting was almost impossible. It was often easier to code the page from scratch than hunt around in the hope of fixing the bug. Things were further complicated if you were working on a large site. Because the presentation of the site was locked into the individual pages, you had to craft complicated “find and replace” routines to make even the smallest sitewide change. I’ve broken more than one site in my time because of a hastily constructed “find and replace” routine. Consequently, your page templates would go out of sync extremely quickly, and a simple change could mean hand editing every page on your site.

Tables were never meant for layout, so David Siegel invented a clever hack to make them work. In order to prevent tables from horizontally or vertically collapsing, Siegel suggested using a 1-pixel transparent GIF. By putting these hidden images in their own table cells and then scaling them vertically or horizontally, you could artificially enforce a minimum width on the cells, thus preserving the layout. Also known as a “shim GIF” because of the file name given to them in Dreamweaver, they were an extremely common sight in old school table-based layouts. Thankfully, the practice has now died out, so you no longer see these presentational elements cluttering up your code.

Rather than being seen as a simple markup language, HTML gained a reputation for being complicated, confusing, and prone to errors. Consequently, many people were afraid of touching the code, which resulted in an overreliance on visual editors and spawned a whole generation of designers that didn’t understand how to code.

By the turn of the millennium, the web design industry was in a mess, and something needed to be done.

Then along came Cascading Style Sheets. CSS allowed authors to control how a page looked through an external style sheet, making it possible to separate the content from presentation. Now, sitewide changes could be made in one place and would propagate throughout the system. Presentational tags like the font tag could be ditched, and layout could be controlled using CSS instead of tables. Markup could be made simple again, and people began to develop a newfound interest in the underlying code.

Meaning started to creep back into documents. Browser default styles could be overridden, so it became possible to mark up something as a heading without it being big, bold, and ugly. Lists could be created that didn’t display as a series of bullet points, and blockquotes could be used without the associated styling. Developers started to use HTML elements because of what they meant rather than how they looked (see Figure below).