5 incredibly outdated and annoying techniques in (X)HTML 16 February, 2007 — Stuart Brown

Navigating through the vagarities of legacy code

Posted in Web Design, Design
Tagged with: , , , , ,

Legacy code. The mere words strike fear into the most hardened web developer, and with good reason - out of date, poorly factored code that's been left untouched for years is a nightmare to work with.

legacy code

Inevitably the person who originally wrote it is mysteriously absent, there's no documentation or comments, and changing anything breaks everything else on the page in question. Refactoring HTML or code like this is never fun or pleasant.

It's been on my mind somewhat as I've been knee-deep in tag soup this week, revitalising and restoring some old code to a more modern, cleaner spec. It's like a journey back in time for the most part - I'm remembering techniques and foibles that I was using 5 years ago (and thinking I was great at this web design lark whilst doing so).

So before you venture out into the darkness of legacies past, I am here to advise you to some of the more common beastly sightings that you are sure to come across on your journey.

The <font> tag

Back in the day, the <font> tag was the mainstay of the early web designer / typography - indeed, it was the only means of control we had over the display of text within a HTML document. Long deprecated, and now absent from the later revisions of XHTML, <font> tags now congregate in large herds, mixing both style and content, and generally making the place a mess.

Before CSS, when there were only 7 font sizes and 16 colours to choose from, the <font> tag was king. These days, it's little more than a reminder of what CSS has done to aid the web designer - true separation of style and content.


Thankfully XHTML mandates case-sensitivity in markup, with a bias towards lower case for tags. Some older HTML may precede this implicit preference, as HTML 4.0 and earlier could be marked up as you pleased. Perhaps it's just me, but editing swathes of tags in capital letters is thoroughly unpleasant.

It's as though the markup is screaming "LOOK AT ME! I'M GOING TO BE A NIGHTMARE TO DEAL WITH!". Often seen in conjunction with the other maladies in this list, but in itself is a nightmare to bring up to XHTML spec.

Inconsistent or absent quotation marks

Whilst I'm fairly confident that double quotation marks (") are the way to go for the delimitation of attributes, I do see a lot of code with single quotes (') or completely absent quotes in the markup.

This probably annoys me more than it should. I rigorously stick to double quotes for all attributes, and single quotes for occasional JavaScript within these quotes - as for attributes values without delimiters, I quite frankly despair.

Bastard transitional HTML (<span color="">)

The transition from older HTML specs to newer was difficult for some developers - evidently some habits die hard, as bastard HTML which lies somewhere between XHTML and HTML 3.2 specs is a surprisingly common sight in markup from just a few years ago.

The application of CSS styles to <font> tags and 'color' attributes to <span> tags is thankfully a rare sight now, but what possessed some people to mix techniques like this is beyond me. All part of the joys of legacy code, I suppose!

Using a hammer to tighten a screw

This is just a gripe with general misuse of elements - <br> instead of block level elements, empty <table>s to add style or space to a document (or, heaven forbid, to underpin the entire layout). Perhaps back then we were all guilty of not fully understanding block-level models and layouts, but in retrospect such hacks such as 1 pixel width transparent GIFs to align and space content seem delightfully archaic.

Still, just goes to show what a dynamic and fast-paced rate at which things change in the web design world - and even if we think we're great markup artists now, all it takes is another major new technology and we're left behind in the dark - with nothing but our own legacy code to keep us company. Depressing thought, that.