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.
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.
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
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.
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.