The Skinny on Doctypes
Update: For the record, this is the standard forward compatible HTML 5 doctype. This should always work.
Doctypes have long been in standardista discussions circles. Why to use them. Which one to use. Which one is best. These are all <sarcasm>really fun details</sarcasm> to get into, but the most important aspect of any doctype is simply having one, since without one, you’re stuck in the lovely world of “quirks mode”. If you’re interested in understanding the anatomy of a doctype, then by all means, dive in.
At Google, we have this obsession with byte size. And by byte size, any “lack-therof” the better. Therefore the doctype you will find on most Google webpages while still triggering the browser into “standards mode” is as simple as you see below:
The skinny doctype
<!doctype html>There is really, absolutely no reason you need the rest of the doctype in your declaration unless you’re validating code. Furthermore, it does not mean that your page is even invalid. In the end, it puts your webpages into standards mode, which is what really matters. (Plus it’s easy to memorize ;)
Try it out. It will fix your box model in IE6 and clobber all those other funny gotchas when you’re in quirks mode. Cheers.
Update: David was kind enough to share his results using the skinny doctype on his blog. The results, as expected, keep your browser tame.
November 24th, 2008 at 7:36 pm
Hmmm. Mental note.
November 24th, 2008 at 7:59 pm
I’m guessing that it wouldn’t matter if it’s html or xhtml? Since you wouldn’t be validating it?
November 24th, 2008 at 8:01 pm
Very interesting viewpoint; I still attempt to use a full doctype which best describes the content being served on the page instead of saving bytes… but I like your view on this.
2 posts in one week, are you feeling ok? Kidding aside, I hope to see more posts here.
November 24th, 2008 at 8:12 pm
@Luke: At least it’s a simple mental note. Memorizing the doctype in this case is pretty easy :)
@Andrew: Doesn’t matter. the second argument in the doctype declaration defines the root element of your document. Therefore, in both cases of HTML & XHTML, the root element is always <html>
@Dan: Haha. Yeah. 2 posts in a week. Amazing isn’t it. There’s only one way to get back in, and that’s full force ahead.
November 24th, 2008 at 9:56 pm
The skinny DOCTYPE enables full strict mode in modern browsers causing all IMG tags to be rendered inline, which means that some space should be reserved for possible descender characters like g, j, or q. This causes a noticeable bottom margin below images. Open the following pages side-by-side to see the difference:
http://www.zdimensions.gr/apostolos/doctype/html4.htm
http://www.zdimensions.gr/apostolos/doctype/html5.htm
You can fix this behavior by using img { display: block; }, so I guess it's just a minor a inconvenience. Other DOCTYPEs enable "almost strict mode" where images are rendered conventionally.
November 24th, 2008 at 10:47 pm
Of course, you’re also setting yourself up for forwards compatibility, as that will be the doctype of HTML 5. Yay!
November 24th, 2008 at 11:39 pm
The skinny DOCTYPE enables full strict mode in modern browsers causing all IMG tags to be rendered inline, which means that some space should be reserved for possible descender characters like g, j, or q. This causes a noticeable bottom margin below images. Open the following pages side-by-side to see the difference:
http://www.zdimensions.gr/apostolos/doctype/html4.htm
http://www.zdimensions.gr/apostolos/doctype/html5.htm
You can fix this behavior by using img { display: block; }, so I guess it’s just a minor a inconvenience. Other DOCTYPEs enable “almost strict mode” where images are rendered conventionally.
November 25th, 2008 at 2:20 am
[...] just had to share this one with you as soon as I read it. Dustin Diaz shows us a way of declaring a doctype, that puts the browser is standards mode. Thought it won’t validate, which he explains: There [...]
November 25th, 2008 at 2:26 am
validator.nu developer Henri Sivonen’s “Activating Browser Modes with Doctype” at http://hsivonen.iki.fi/doctype/ is worth citing in addition to or instead of the about.com page you cite. It’s worth noting that Henri doesn’t recommend that most sites switch to using the doctype yet.
November 25th, 2008 at 2:33 am
…I meant to say, It’s worth noting that Henri doesn’t recommend that most sites switch to using the HTML5 doctype yet (that is, the short form you give an example of in your post).
Also maybe worth noting that all the normally recommended doctypes in use now (e.g., the ones that Henri gives in his article) are also forwards-compatible — in that nothing HTML5 specifies is going to break any of the existing browser behavior in regard to them.
November 25th, 2008 at 3:43 am
The chart on
http://en.wikipedia.org/wiki/Quirks_mode
shows that browsers switch into either quirks, standard or “almost standards mode” (”Almost standards mode” is non-standard table cell height rendering) based on which doctype is used. Are we sure this would switch all browsers into full standards mode?
November 25th, 2008 at 8:00 am
Nice! This is actually a very useful tip!! Thanks
November 25th, 2008 at 8:11 am
[...] The Skinny on Doctypes <!doctype html> (tags: standards html doctype) [...]
November 25th, 2008 at 8:33 am
Interesting approach. Wouldn’t that defeat the whole purpose of validating. I’l give it a try on one of my projects to see.
November 25th, 2008 at 11:26 am
Doctype freedom! Thanks Dustin for setting me free.
November 25th, 2008 at 12:45 pm
Love it. I am going to use it for sure!
November 25th, 2008 at 6:16 pm
Michael(tm) Smith mentioned Henri Sivonen, and I’d add that you can validate against the emerging HTML5 spec using Sivonen’s validator, http://html5.validator.nu/ so if you dump all that HTML4/XHTML1 header cruft and switch to using
you can still check your pages, and little else in your markup needs to change (some minor HTML5-specific things).November 25th, 2008 at 6:37 pm
Yep, this is basically the HTML 5 doctype. Among others, John Resig wrote about this back in January.
Also, I noticed earlier this week that the W3C Validator is now validating HTML 5:
Pretty cool.
November 25th, 2008 at 6:47 pm
@Baki: the purpose of validating is to ensure that your code is valid according to a specific doctype. Shocking, I know :P
But valid code doesn’t mean “proper” rendering, and “improper” rendering doesn’t mean invalid code. According to the wikipedia article Chris posted, this skinny doctype will make most modern browsers use “standards mode” and will make IE use “almost-standard mode”
Basically, if I’m reading this right, the skinny doctype will standardize some/most element behaviors across browsers without tying you down to a specific language’s syntactic rules. Though I’m not sure what the implications are for running the W3C’s validator on such a page.
It is worth noting, though, that the HTML 4.01 Strict doctype has the same effect on the major browsers, with the exception of putting NS6 in standards mode rather than quirks mode.
November 25th, 2008 at 9:52 pm
[...] The Skinny on Doctypes [...]
November 26th, 2008 at 2:17 am
[...] The Skinny on Doctypes Google have decided to go skinny with their Doctypes. [...]
November 28th, 2008 at 5:22 am
[...] is what HTML 5 defines, and Dustin Diaz agrees as he lays down the skinny: Doctypes have long been in standardista discussions circles. Why to use them. Which one to use. [...]
November 28th, 2008 at 6:23 am
[...] | # | Tags: dev, web Turns out doctypes in HTML are, practically, a lot simpler than I thought. This is used over at Google and apparently it will be used in HTML5. No more templates or copying and pasting from previous HTML. [...]
November 28th, 2008 at 6:12 pm
[...] is what HTML 5 defines, and Dustin Diaz agrees as he lays down the skinny: Doctypes have long been in standardista discussions circles. Why to use them. Which one to use. [...]
November 29th, 2008 at 2:41 am
[...] is what HTML 5 defines, and Dustin Diaz agrees as he lays down the skinny: Doctypes have long been in standardista discussions circles. Why to use them. Which one to use. [...]
November 29th, 2008 at 3:41 am
[...] Dustin Diaz at Google, taking into account the fact that “every byte matters”, chopped down the doctype to the following: [...]
November 29th, 2008 at 6:10 pm
“Furthermore, it does not mean that your page is even invalid.”
This depends on your definition of “valid”. According to the traditional definition — conformance to an SGML profile and DTD — then sorry, it’s invalid. Practical, but invalid.
Now, if you’re talking about conformance with HTML 5, that’s another story. Unlike all previous versions of HTML and XHTML, HTML 5 isn’t built on the SGML standard, and it therefore carries a different definition of the word “valid”. But then, HTML 5 is still very much a work in progress, and I think it’s a bad idea to promote the general use of any technical specification that’s still in the drafting stages.
November 30th, 2008 at 12:29 am
David,
the question that is being begged here is the question of validity itself… not the definition of validity. When people see this doctype, people wonder if their page will still validate, which is why I brought it up.
Also, on what grounds is it a bad idea?
December 1st, 2008 at 4:13 am
[...] fa questo doctype? Stando alle parole di Dustin Diaz, fa quello che deve. Mette i browser in modalità standard. Ovviamente il [...]
December 1st, 2008 at 11:10 am
Interesting…I’ve been setting HTML 4.01 strict for awhile now with good results, but skinny seems to be sufficient for pretty much all browsers (sans NS6, maybe Konqueror) that I care to test.
I’m not sold that saving 75 or so characters on each page is all that valuable, but if it triggers similar behavior, it doesn’t sound like it would hurt to skinny-ify my doctype. I do however still worry about what effects making this change now might have on how browsers want to render my pages (which are widely variable in terms of both content and structure (unfortunately)).
Really, until I see a lot more test results, and groups like W3C, WASP, etc start recommending it’s use, I’ll be conservative and leave things as HTML 4.01 strict.
December 1st, 2008 at 11:21 am
The question of validity depends on the definition of validity, unless you’re just talking about whether people are allowed to put the “look ma, it validates!” sticker on their page. A document using your suggestion does not conform to any currently existing technical standard or W3C recommendation, so I think it’s very questionable to state that it is valid.
As for premature use being a bad idea, I think this touches on a fundamental reason standards are valuable in the first place: they provide a static set of requirements and expectations. The key word there is “static”. Yes, a standard may evolve over time, but it generally does so in a series of milestones that don’t contradict each other. But the HTML 5 standard isn’t finalized yet and won’t be until at least 2010 (probably later, considering how these things usually go). A lot can change between now and then, and there is definitely no guarantee that the final standard will be compatible with your recommendation.
This isn’t just a practical issue for web developers (”What if the finalized standard conflicts with what I’ve been doing?”). It’s also an issue for the developers of that standard. They have a certain expectation of freedom in the drafting process, in order to eventually develop what they believe is the best standard they can make. If people start implementing those drafts prematurely, the “real world support” forces may end up tying the drafters’ hands.
One could argue that widespread use of a drafted syntax or feature testifies that the syntax or feature was well-designed and shouldn’t change, but I think that’s a narrow-sighted view. The Web is a diverse place, and I don’t think a (relatively) small ambitious group of early adopters should tie the hands of the specification drafters who are trying to create the best standard possible for the entire Web.
December 1st, 2008 at 11:50 am
Feeling free to generally reply to some comments: Yes, you can use HTML 5.
December 1st, 2008 at 1:31 pm
[...] The Skinny on Doctypes [...]
December 1st, 2008 at 2:57 pm
[...] Russ at Maxdesign a short and sweet window to the minimalist doctype identifier from Dustin Diaz, a Google user interface engineer. His [...]
December 2nd, 2008 at 7:37 pm
Wow, thanks. Didn’t even know that form existed or was valid. I hadn’t noticed it in the source.
December 4th, 2008 at 10:28 am
As David says, your page isn’t valid of you use that “doctype”. Your markup might be, but your page isn’t. I’m not objecting to using it, but claiming your page is valid is incorrect.
It also seems like a hassle to use a real doctype when validating and then have to switch over to this when you publish it. Are the bytes really worth the time?
December 6th, 2008 at 9:22 am
Thanks for clearing that up. I was never really sure what the significance was of the doc type.
December 7th, 2008 at 12:04 pm
Great post. Totally agree that the only reason you actually need a doctype is to keep out of quirks mode.
December 16th, 2008 at 12:20 pm
Noticed that the Google Search results page specifies the short doctype, but doesn’t include an <html> node. Any reason why?
December 16th, 2008 at 1:02 pm
Zach — the fact that it still works is probably why it’s used…. not that I personally recommend that bit.
December 26th, 2008 at 9:22 am
[...] Dustin Diaz recently pointed out, the following is all that is needed to make sure all browsers render the page in standards mode, [...]
January 2nd, 2009 at 4:32 am
[...] tweaking and saving bytes wherever we can. However you can overdo that. As Dustin Diaz explained Google are using <!doctype html> as their doctype to save on some bytes and David Calhoun proved that it is working across the [...]