Doctypes, for Designers

Jonathan wrote this on July 20, 2009 in . It has 1 reaction

Most any designer worth their salt writes clean, structured, standards-compliant code. But even then, browsers can still jack your site, can't they? It might not be the CSS—it might be your doctype.

Whattype?

Most web designers know the doctype declaration—it's that thing that goes at the top of the page. You probably copied it from your last project, but who knows what it is? This post is a short primer in what the doctype is, why we need it, and the easiest way to use it.

The DOCTYPE (document type declaration) tells the browser what model to use when it renders the page—strict or quirks mode. A page with a faulty doctype (or none at all) tells the browser that this is probably an older page, and quirks mode is going to work better. A page with a defined, recent doctype wants to be rendered strictly, with no funny business in the rendering. That's what we want.

The Doctype You Need

There are a few major current doctypes, but from a browser's perspective only one thing matters: standards vs. quirks. All of these force browsers back to IE6 into standards mode, not quirks—but none of them support framesets. If that's your aim, try the frameset doctypes, you heathen.

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
This is a strict HTML 4.01 declaration, meaning the browser should render according to specific standards and not deviate from them. It omits older, deprecated elements like link targets and presentation elements.


  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
This is similar to HTML 4.01 strict, but with deprecated elements brought back in. A very flexible DOCTYPE, but probably not necessary if you're writing really modern code.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML was a reformulation of HTML 4.01, with a strict XML based parser—meaning your code really needs to be valid. Close all your tags and don't get the closing order wrong or XHTML will spit all over your site.


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Like strict, but with deprecated elements. You still need to be valid, but you can be a little more careless about the older elements you use.

All four of those Doctypes will get you what you want, with some caveats for each. Most any modern site you build can use one of those four to get a standards mode render. But you know what? There's an even easier way.

<!DOCTYPE html>

That's it. <!DOCTYPE html> is technically the HTML5 doctype declaration, but the beautiful thing is that it forces everything back to IE6 into standards mode, and will remain valid for a long, long time. Don't believe us? Check out the declaration for Apple, Google, or An Event Apart. HTML5, all of them—and more every day.

Doctypes are tricky to wrap your head around—happily, we really don't have to. <!DOCTYPE html> works everywhere we care about for the code we write. Use it.


Rss

It has 11 comments.

Michael Curry (ZURB) says

Very Nice. Now that I don't have to memorize long doctypes - I can remember where I stored my baseball cards. Thanks Zurb!


Nachtmeister (ZURB) says

Doctypes are tricky to wrap your head around—happily, we really don't have to. <!DOCTYPE html> works everywhere we care about for the code we write. Use it.

But it's not supported by all the browsers at the moment, right?


Jonathan (ZURB) says

@Nachtmesiter Actually, it is - to the extent we need it to be. <!DOCTYPE html> forces even older browsers, back to IE6, into standards mode, which is what we want. Now IE6 does not support the newer HTML5 tags like <video>, but no doctype under the sun is going to make that work.


Loren Baxter (ZURB) says

Wow, I always keep up with ALA, but this is the first I've heard about the shortened doctype. The long one always seemed so unnecessary. Thanks!


Cespur (ZURB) says

Quite ironic that this page has a

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

doctype.

But true, I allways copy+paste it from project to project.


Jonathan (ZURB) says

@Cespur Alright, you caught us :) We only recently started exploring the doctypes here, so in our next sitewide push we'll switch over to the HTML5 doctype.

The awesome thing about this shorter doctype is we don't have to bother with copy/paste anymore, or worry about which one we're using, or forgetting it - it's short enough to just remember every time.


Henrik Joreteg (ZURB) says

I tweeted this and one of the replies said that named character entities like "&copy;" won't work with a DTD-less doctype and that you have to use numeric ones like "&1234;. Is that true? It looks to me like the "event apart" site that you mention uses "&ndash;" and it still displays properly when I test in IE6.

Any thoughts on this?

(Love this blog BTW)


Jonathan (ZURB) says

@Henrik We haven't encountered anything like this, and a quick look around the web seems to show that those character mappings (since they are just mappings to a unicode character) are browser dependent, not doctype dependent. We'll keep an eye out as we test more sites in the HTML5 doctype though. Thanks for the heads up!


unkleE (ZURB) says

Dunno if anyone reads comments on old posts, but I tried this, and it indeed seems to work on all browsers I tried. But the page doesn't validate using the WC3 validator. Do you think that is an issue?


Jonathan (ZURB) says

@unklee Oddly enough the stock W3C validator won't check an HTML5 site, at least last we checked. Using a newer validator like html5.validator.nu will correctly validate the doctype, although it (correctly) notes that many of our current meta tags are deprecated in HTML5 - we keep those around for IE compliance. It shouldn't be an issue but if you find out it is please let us know, we do keep tabs on older blog posts.


w3cvalidation (ZURB) says

Nice information, I really appreciate the way you presented.Thanks for sharing..



Get a job, nerd!

via Job Board from ZURB