What is a DocType?
The doctype declaration should be the first item to appear in the source markup of any web page. It is an instruction to the web browser (or other user agent) and it identifies the version of the markup language in which the page is written. It refers to a known Document Type Definition, or DTD for short. The DTD sets out the rules for that of markup, enabling the browser to render the content accordingly.
Why a DocType?
Per HTML and XHTML standards, a DOCTYPE (short for “document type declaration”) informs the validator which version of (X)HTML you’re using, and must appear at the very top of every web page. DOCTYPEs are a key component of compliant web pages: your markup and CSS won’t validate without them.
DOCTYPES are also essential to the proper rendering and functioning of web documents in compliant browsers like Mozilla, IE5/Mac, and IE6/Win.
A recent DOCTYPE that includes a full URI (a complete web address) tells these browsers to render your page in standards–compliant mode, treating your (X)HTML, CSS, and DOM as you expect them to be treated.
Using an incomplete or outdated DOCTYPE—or no DOCTYPE at all—throws these same browsers into “Quirks” mode, where the browser assumes you’ve written old-fashioned, invalid markup and code per the depressing industry norms of the late 1990s.
In this setting, the browser will attempt to parse your page in backward–compatible fashion, rendering your CSS as it might have looked in IE4, and reverting to a proprietary, browser–specific DOM. (IE reverts to the IE DOM; Mozilla and Netscape 6 revert to who knows what.)
Clearly, this is not what you want. But it is often what you’ll get, due to the preponderance of incorrect or incomplete DOCTYPE information this article hopes to correct.
Using a !DOCTYPE declaration also allows tools (such as SGML browsers or document validators) to view your document. Some of these tools can play vital roles in managing HTML documents.
SGML tools can also use URLs as FPI references to DTDs. The SYSTEM keyword in the Public Text Identifier indicates that the FPI may be a URL reference.
Syntax
Typical HTML DOCTYPE statement:
<!DOCTYPE HTML PUBLIC "-// W3C// DTD HTML 4.0 Transitional// EN" "http://www.w3.org/TR/html4/loose.dtd">
Annotated syntax:
<!DOCTYPE [Top Element] [Availability] "[Registration]// [Organization]// [Type] [Label]// [Language]" "[URL]">
The general rules for choosing:
Most older documents often do not have a !DOCTYPE at all, since its presence was not required in order to render the web page in older browsers. Older documents that DO have a !DOCTYPE present usually reference older DTDs. For !DOCTYPEs that reference known-older DTDs and documents that carry no !DOCTYPE at all, quirks mode is always chosen. When we get to HTML 4, things become interesting – some DOCTYPEs select standards mode, and some select quirks mode.
Doctype HTML5
When serving as text/html, all you need a doctype for is to trigger standards mode. Beyond that, the doctype does nothing as far as browsers are concerned.
When serving as text/html, whether you use XHTML markup or HTML markup, it’s treated by browsers as HTML.
So, really it comes down to using the shortest doctype that triggers standards mode () and using HTML markup that produces the correct result in browsers.
The rest is about conforming, validation and markup prerference.
So you can use the markup
<!DOCTYPE html>
I tested the above doctype in IE8, IE7 (using IE8 dev tools), and IE6 (using Virtual PC). None of them went into quirks mode. So even old IE can definitely handle the standard HTML5 doctype without going into quirks mode
Related articles
