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.
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://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.
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://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.
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://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.
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://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.