What flavour is your HTML?

If you are anything like me, your HTML code is a mish-mash of standard HTML tags, browser specific tags, and whatever else it takes to get your design to look the way you want it to on the majority of browsers. I worry less about what the standards are and more about what is going to get the job done. This often means using a hybrid of HTML code to hack together pages, duplicating code for different browsers and often using JavaScript just to deliver the right layout for the right browser.

If you are anything like me, your HTML code is a mish-mash of standard HTML tags, browser specific tags, and whatever else it takes to get your design to look the way you want it to on the majority of browsers. I worry less about what the standards are and more about what is going to get the job done. This often means using a hybrid of HTML code to hack together pages, duplicating code for different browsers and often using JavaScript just to deliver the right layout for the right browser.

The problem is that, despite the standards, each browser, version and platform works differently even if only slightly so.

The Extensible Markup Language (XML) and Extensible Style Language (XSL) hold the promise of allowing Web designers to separate the display of content from its actual layout. This will, hopefully, free us from many of the worries of the particular quirks of a browser.

However, despite the recent ratification of a stepping stone to that future in the form of XHTML, browsers continue to be "flawed", at least from a standards point of view.

Recognizing that we live in a flawed World Wide Web, the World Wide Web Consortium has introduced three "flavours" of HTML code in the recently revised HTML 4.01 standard. These three flavors allow Web designers to declare what form their HTML will take: strict, transitional or frameset.

So, I am sure you are scratching your head in wonder, how does the browser know what flavor I am using? Simple, you have to place a <!DOCTYPE> tag at the very top of every Web page, before the tag in fact, to the browser what Document Type Definition (DTD) it should use.

HTML 4.0 Strict The strict form of HTML is nothing but the standard tags HTML 4.01 tags. It's rare that you will see any site - even the W3C's own Web site - using this one. The fact is, standards are great, but no Web browser out there follows them 100 per cent. However, if you are really sure of your coding capabilities, place this tag at the top of your page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.0 Transitional Transitional HTML is what most people are using now. It includes all of the HTML 4.0 tags, but also allows you to include tags and attributes that are either being "depreciated" (ie, eliminated) from the HTML standard or are used only by a specific browser. Unfortunately, due to incompatibilities between different browser types, some of the power of HTML 4.01 will be sacrificed when using transitional HTML. For example, table elements will not be able to inherit styles and font sizes will very more radically.

More than likely you will want to use the transitional <!DOCTYPE> in your HTML code for the foreseeable future, at least until the overwhelming majority of browsers being used are standards compliant. In theory, the transitional <!DOCTYPE> tag should look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Unfortunately, this version of the tag still causes IE5/Mac (the only browser to currently make use of the <!DOCTYPE>) to act as if this is strict HTML 4.01 code. This can cause your page to display improperly as I learned the first time I fired my own site up with IE5/Mac. The good news is that there is an easy way around this: take the URL out, thus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

HTML 4.0 Frameset Finally, frames deserve there own <!DOCTYPE> . If your HTML document is a frameset definition, then you want to use this one:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Validating your pages and !DOCTYPE switching The fact is, however, if you don't add the <!DOCTYPE> to your Web pages, most Web browsers will never notice. However, if you want to check your HTML code for accuracy, by including the <!DOCTYPE> you can then use the W3C's HTML validator to check your code for "accuracy".

Once you have fixed all of these errors you get a nifty "HTML 4.0" button that you can add to the mass of graphics that are cluttering your page. And now your HTML will work everywhere, right. No, not really. Actually, only a very few people surfing the Web right now with anything close to a standards compliant browser, much to many Web designer's chagrin.

But the times they are a changing.

Although currently the only non-beta browser that actually even notices the <!DOCTYPE> tag is IE5/Mac, Navigator 6 and iCab should also make use of it when they are finally released later this year. These programs will use the <!DOCTYPE> tag to validate pages on the fly, allowing the browser to determine the difference between a backwards compatible page (transitional) and a standardised page (strict). This is known as "doctype switching" and will allow standards based browsers to take advantage of the power of HTML 4.01 when the standards are obeyed while still being able to properly render older Web pages.

Jason Cranford Teague is the author of DHTML For the World Wide Web, available from book stores around the UK. If you have questions, you can find an archive of his column at Webbed Environments or email him at jason@webbedenvironments.com

Arts and Entertainment
Books should be for everyone, says Els, 8. Publisher Scholastic now agrees
booksAn eight-year-old saw a pirate book was ‘for boys’ and took on the publishers
Life and Style
Mary Beard received abuse after speaking positively on 'Question Time' about immigrant workers: 'When people say ridiculous, untrue and hurtful things, then I think you should call them out'
tech
Life and Style
Most mail-order brides are thought to come from Thailand, the Philippines and Romania
life
News
i100
Life and Style
tech
Voices
Margaret Thatcher, with her director of publicity Sir Gordon Reece, who helped her and the Tory Party to victory in 1979
voicesThe subject is being celebrated by the V&A museum, triggering some happy memories for former PR man DJ Taylor
Latest stories from i100
Have you tried new the Independent Digital Edition apps?

Day In a Page

General Election 2015: Chuka Umunna on the benefits of immigration, humility – and his leader Ed Miliband

Chuka Umunna: A virus of racism runs through Ukip

The shadow business secretary on the benefits of immigration, humility – and his leader Ed Miliband
Yemen crisis: This exotic war will soon become Europe's problem

Yemen's exotic war will soon affect Europe

Terrorism and boatloads of desperate migrants will be the outcome of the Saudi air campaign, says Patrick Cockburn
Marginal Streets project aims to document voters in the run-up to the General Election

Marginal Streets project documents voters

Independent photographers Joseph Fox and Orlando Gili are uploading two portraits of constituents to their website for each day of the campaign
Game of Thrones: Visit the real-life kingdom of Westeros to see where violent history ends and telly tourism begins

The real-life kingdom of Westeros

Is there something a little uncomfortable about Game of Thrones shooting in Northern Ireland?
How to survive a social-media mauling, by the tough women of Twitter

How to survive a Twitter mauling

Mary Beard, Caroline Criado-Perez, Louise Mensch, Bunny La Roche and Courtney Barrasford reveal how to trounce the trolls
Gallipoli centenary: At dawn, the young remember the young who perished in one of the First World War's bloodiest battles

At dawn, the young remember the young

A century ago, soldiers of the Empire – many no more than boys – spilt on to Gallipoli’s beaches. On this 100th Anzac Day, there are personal, poetic tributes to their sacrifice
Dissent is slowly building against the billions spent on presidential campaigns – even among politicians themselves

Follow the money as never before

Dissent is slowly building against the billions spent on presidential campaigns – even among politicians themselves, reports Rupert Cornwell
Samuel West interview: The actor and director on austerity, unionisation, and not mentioning his famous parents

Samuel West interview

The actor and director on austerity, unionisation, and not mentioning his famous parents
General Election 2015: Imagine if the leading political parties were fashion labels

Imagine if the leading political parties were fashion labels

Fashion editor, Alexander Fury, on what the leaders' appearances tell us about them
Phumzile Mlambo-Ngcuka: Home can be the unsafest place for women

Phumzile Mlambo-Ngcuka: Home can be the unsafest place for women

The architect of the HeForShe movement and head of UN Women on the world's failure to combat domestic violence
Public relations as 'art'? Surely not

Confessions of a former PR man

The 'art' of public relations is being celebrated by the V&A museum, triggering some happy memories for DJ Taylor
Bill Granger recipes: Our chef succumbs to his sugar cravings with super-luxurious sweet treats

Bill Granger's luxurious sweet treats

Our chef loves to stop for 30 minutes to catch up on the day's gossip, while nibbling on something sweet
London Marathon 2015: Paula Radcliffe and the mother of all goodbyes

The mother of all goodbyes

Paula Radcliffe's farewell to the London Marathon will be a family affair
Everton vs Manchester United: Steven Naismith demands 'better' if Toffees are to upset the odds against United

Steven Naismith: 'We know we must do better'

The Everton forward explains the reasons behind club's decline this season
Arsenal vs Chelsea: Praise to Arsene Wenger for having the courage of his convictions

Michael Calvin's Last Word

Praise to Wenger for having the courage of his convictions