Why? icon Home pageDiaryAbout meLinks

Whys and wherefores

Johnny was a peculiar guy
Brought up on love and the reasons why
But the reasons why ought not to be said
And so I'm left, hands held to my head
- Tanita Tikaram, Ancient Heart

HTML used to be simple - just text marked up with a few tags to enhance its meaning and put it into the proper context. The whole idea was that whatever browser was displaying (or speaking, or brailling) the text would have some extra information to help it in its task.

Then someone added images to the specification, and things were never the same again. Now, images can impart a lot of extra information to a document. The trouble is that they can also be just decoration.

Decoration is for Christmas trees and retired army officers. Cluttering the Web with it isn't necesarily a good thing, especially when the decoration is many times the size of the page it decorates. Of course, many pages on the Web are about graphics - artists pushing back the envelope of 800 x 600 pixel design. These pages are unashamedly graphic-heavy, and frequently very beautiful; no-one's trying to remove them from the Web.

Unfortunately, everybody wanted in on this graphics thing. They wanted people to look at their pages and go 'Oooh!' and 'Ahhh...'. Unfortunately, when people came to their pages to try to find information, and discovered that they had to wade through 20 irrelevent, eye-catching graphics to find it, they tended to go 'Arrrgh!'

And then some idiot confused semantic markup with DTP, and started trying to use HTML to control how the browser displayed something. The <center> tag appeared, closely followed by <font>. Personally, I blame whoever left <i>, <b> and <tt> in the original specification.

The basic problem is not so much that you shouldn't be trying to dictate how people view your pages. You can do this if you like; you'll succeed in some cases and fail in others. The important thing is that where you fail your HTML shouldn't look like a total dog's breakfast. Unfortunately, the current practice of cluttering up your HTML with presentation markup militates heavily against this.

Cascading style sheets come to the rescue. These separate off all the presentation information from the HTML. Not only does this allow you much greater control over how the HTML looks, it means that you can remove all the ugly constructions from you HTML that you used to get the appearence just so, and concentrate on marking up for content.

This has a double advantage. For the control-freaks, it means that we can have extensive control over the appearence of our HTML. More importantly, it means that people start marking headings as headings again. The Markup aspect of HTML becomes context markup again, which can only help those browsers to whom that fact that some text is bold means nothing, but the fact that it is a level one heading may be highly significant.

(Almost) all presentation markup in the text of these pages is done using cascading style sheets. This means that on browsers that don't support style sheets, the pages will look plain and simple (but hopefully unfussy). On browsers that do support style sheets, they still won't look very fussy, because the style sheet mark-up is fairly minimal.

The heading of each page is formatted in a table, just to keep it neat. It looks OK on a non-table browser (yes, I have checked). It also uses JavaScript to light up the images when the pointer moves over them, but if you don't have JavaScript you won't see that. It's just eye candy, you're not really missing anything, honest.

Anyhow, that's why these pages aren't full of fancy table-based layouts. It's not that I can't do them - trust me, I can - but I don't especially want to.


These pages were created in a mixture of editors. Primarily I used the text editors TextPad on the PC and Zap on the Acorn, but some of them originated in HoTMetaL PRO 4, a dedicated HTML editor which I've found not to mangle my hand-coded HTML too badly. Recently I've switched to using DreamWeaver 2 from Macromedia, which handles stylesheets very well and seems to have been written by a team who really understand simple, well-structured HTML.

The graphics were created in software from Xara Ltd - mostly CorelXARA and Xara3D The JavaScript and CSS is hand-coded.

On browsers that support CSS, the main text is set in a sans serif font - Verdana, if you have it. Headings appear in Comic Sans MS if you have that, or Frutiger or a sans serif font if not. The quotes are in Courier or a monospaced font.

David Matthewman - david@matthewman.org