Follow me on twitter
Latest articles
- FlagQuiz - my first PhoneGap powered app
- How to enable USB Debugging on Samsung Galaxy Tab?
- liveriots.com - my website about 2011 London Riots
- My new website - Cheap Mobile Deals UK
- How to capitalize word with JavaScript
- RC airplane ground station software demo
- Accessing iFrame content from parent HTML page using jQuery
- Resolving: You might not have permission to use this network resource
- How to create custom selectors in jQuery?
- Conway's Game of Life in JavaScript
Places I visit
XHTML Doctypes
Submitted by Piotr Rochala on Sat, 11/07/2009 - 13:05
XHTML Doctype is a very important part of every XHTML document. When correct Doctype is set, web browser knows how to parse your website and how to correctly display it to the user.
Unfortunately, Doctype definition is quite difficult to remember and we always need to google for the cheat sheet, so here is another one:
XHTML 1.0 Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
That's it! Remember any of the above lines should be placed as the very first line of every HTML Document.
If you are looking for doctypes for other web-documents visit this W3C page.
Which Doctype should I choose?
Frameset is reserved for pages with frames, so most of the times the real choice is only Strict vs Transitional. I always go with Transitional, mainly because this Doctype allows to use more HTML tags and attributes. Table below shows what tags and attributes are allowed for both Doctypes:
| HTML tag | Strict Doctype | Transitional Doctype |
|---|---|---|
| <center> | NO | YES |
| <font> | NO | YES |
| <iframe> | NO | YES |
| <strike> | NO | YES |
| <u> | NO | YES |
| HTML attribute | Strict Doctype | Transitional Doctype |
|---|---|---|
| align | NO (only allowed on: <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>) | YES |
| alink | NO | YES |
| background | NO | YES |
| bgcolor | NO | YES |
| border | NO (only allowed on <table> element) | YES |
| height | NO (only allowed on <img> and <object> | YES |
| hspace | NO | YES |
| language | NO | YES |
| link | NO | YES |
| name | NO (allowed in HTML 4.01 Strict, but now allowed on <form> and <img> in XHTML 1.0 Strict | YES |
| noshade | NO | YES |
| nowrap | NO | YES |
| target | NO | YES |
| vlink | NO | YES |
| vspace | NO | YES |
| width | NO (only allowed on: <img>, <object>, <table>, <col>, <colgrup>) | YES |
Did you like my article? Share it!
Fun facts
I find DOCTYPEs very interesting (sad but true). In particular, I've always wondered what practical effect they have on browsers - since browsers will do their very best to render even horribly broken HTML, and implement their own deviations from W3C, will an incorrect DOCTYPE have any effect? And since IE has such an abstract understanding of what makes a healthy HTML document, how does it interpret dtds, if at all?
There is a fun fact about IE's behaviour as regards doctypes. Sure you can use an XML doctype before the XHTML doctype to force quirks mode in older IEs, or use a malformed doctype (or none at all). But get this. IE7+ will attempt to download the dtd from the location specified in the DOCTYPE every time. It doesn't even cache it, or actually do anything useful with it (god knows it doesn't respect it). This means that every time anybody using IE7+ loads any HTML page with a doctype, W3.org gets an HTTP request! But this is the punchline: W3's hosted dtds have some browser-sniffing going on on the back end for each incoming HTTP request - if it's a normal, healthy looking one it will simply HTTP respond with the .dtd file. But if it detects IE, it returns a single word: 'NO'. I think this is one of the most hilarious IE deficiencies ever.
A nice way to avoid that stupid (but inconsequential) behaviour and keep everyone happy is to use the HTML5 doctype. It's valid on pretty much any well-formed XHTML document, forward-compatible, produces correct behaviour in all modern browsers, and easier to remember too:
<!DOCTYPE html>Post new comment