Document Type Declarations
Like all standards, HTML goes through revisions. Every so often, a new version of HTML will be made a recommendation, adding and removing features and fixing bugs and rendering quirks. Problem being, no one is obligated to write pages to a newer standard...or any standard, really. As a result, every new browser release means potentially breaking compatibility with existing sites.
Browsers often implement different rendering modes to handle malformed or older pages—and it's through document type declarations (herein referred to as doctypes) that you can trigger them.
A history of "quirks mode"
In the past, both browser developers and site builders often disregarded web standards and built their work to their own standards instead. Netscape users often tuned their sites to use Netscape-specific features, and Internet Explorer users the same. Neither browser worked right on every page. When a new browser would come along, it meant either supporting existing sites with all of their quirks or supporting the standard and breaking compatibility with those sites.
A good example of incorrect rendering behavior in an older browser is known as the "box model bug". Internet Explorer 5 and below defined the width of an element as being the width of its content, plus the element's border and padding. The standard defines the width of an element as being just the width of the content. A site that was built with IE's width in mind wouldn't look right in a browser that was built to the standard. In the choice between supporting older pages and being standards-compliant, browser developers chose both.
Internet Explorer for Mac 5.0 was the first browser to implement a feature known as quirks mode. A browser in quirks mode renders an older page exactly like older browsers would, while new pages would be rendered according to the standards in standards mode. (If you're curious about what other differences exist between quirks and standards modes, check the "Quirks Mode Living Standard" page listed in the Further Reading section at the bottom of this page.)
How doctypes factor into quirks mode
So how can a browser tell the age of a page? It's fairly simple: standards-compliant pages from then on would begin with a line of markup called a doctype. Most generally, the doctype tells the user agent the language the document is written in; in English, the doctype tells the browser which version of HTML was used in writing it. If the doctype is old or there is no doctype, the browser falls back into using quirks mode for compatibility. If the doctype is more recent, browsers instead render according to the standards.
Some browsers implement a third mode called almost-standards mode. This mode renders according to the standards, with the exception of their handling of table cells. Old sites would occasionally make use of table layouts, stuffing cut up images into cells of the table to make up one final, seamless image-based layout. Standards mode breaks these pages, as table cell contents are aligned differently than old browsers often handled them. Almost-standards mode therefore makes an exception to keep these pages looking correct.
Making use of doctypes
This is what HTML5's doctype looks like. HTML5's doctype will trigger all modern browsers into rendering in standards mode.
<!DOCTYPE html>This must be the first line of any page you write. No markup can precede this line, or else the browser will render in quirks mode instead.
Practically, there's no reason to use any other doctype, as there's no practical reason to use older versions of the HTML standard. Web design isn't all about practicality, though; I myself have a fondness for writing pages for older browsers. If you're like me and working with older versions of HTML, or if you're merely curious and want to hear some trivia, here's some information on the older doctypes.
(I repeat, you don't need to know any of what I'm about to tell you! Your page will work just fine with the doctype I gave you in this section. The rest of this page is just for completeness and curiosity.)
HTML 4.0 doctypes
HTML 4.0 (or more accurately, 4.01) has three valid doctypes, Strict, Transitional, and Frameset. Strict HTML4 follows the standards to a tee, while Transitional allows the use of elements that control how the page looks, like <font>, <center>, and <marquee>. These elements are older and meant only for ease of porting new pages over. Frameset is identical to Transitional but allows the use of frames on a page.
<!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 HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">These doctypes are much longer than the HTML5 one as the standards used to require a document type definition, or DTD. DTDs are very technical documents that specify the elements and attributes available to an SGML-based language. Browsers never much took advantage of these as they're built for web pages in particular, and thus had no real need to support any other SGML-based languages. Thus, for ease of use, HTML5 got rid of the requirement for one.
XHTML 1.0 doctypes
One proposed extension to HTML is known as XHTML. In the last section, I referred to something called "SGML", or the Standard Generalized Markup Language. Think of it like a more general HTML, looking like it, though with different tags and attributes. Technically, in its early days, HTML was based on SGML.
XHTML is instead based on XML, or the Extensible Markup Language. XML is a simplified version of SGML that, among other things, doesn't require a DTD if the markup is "well-formed", with all tags closed, even void tags. If you've used more recent versions of Microsoft Office, their file formats (docx, xslx, and pptx) actually use XML internally, hence the X at the end of the extension.
XHTML was meant to be a version of HTML that could be parsed like an XML document, meaning the page could be easily translated into other markup languages for use on mobile phones and suchlike. XHTML never much caught on, and a proposed HTML5 upgrade in XHTML5 is now dead in the water. Nonetheless, XHTML doctypes come in three flavors as well, Strict, Transitional, and Frameset:
<!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"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">There are actually two additional versions of XHTML, namely 1.1 and Basic, but these are so minor that they're almost not worth mentioning. 1.1 implements XHTML's features in modules so browsers only support what's needed, and XHTML Basic is meant for extremely low-powered appliances who can't handle all of the language's features. Nevertheless, since we're talking about doctypes:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">HTML 3.x doctypes
HTML 3.0 uses the following doctype:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN//">Seeing as HTML 3.0 never became a standard and was quickly revised into HTML 3.2, it's fitting that the doctype changed as well:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">In case you're curious, HTML 3.2 became a recommendation in 1997 and features no official support for stylesheets. Those looking for absurd compatibility with as many browsers as possible ought to try it.
HTML 2.0 doctype
Finally, we get to the first official, recommended version of HTML, 2.0. (1.0 was merely a draft that circulated around CERN for an official language to the World Wide Web.) It was finalized in September 1995 and the W3 still maintains archives of all its materials on it. Its doctype looks like this:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">Eagle-eyed readers might've noticed neither 2.0 or the 3.x doctypes feature a DTD in their doctype. As for why this is, I'm not sure.
Which doctypes render in which mode?
In short, HTML5, HTML 4.01 and XHTML 1.0 Strict pages always render in standards mode. Transitional and Frameset pages render in almost-standards mode. HTML 2.0, 3.0, 3.2, and pages without a doctype always render in quirks mode.
If a table more suits your fancy:
| Doctype | Netscape 6 | Modern browsers (IE8+, Firefox, Chrome, Safari, Netscape 7+) | Internet Explorer for Mac 5.0 | Internet Explorer 6 | Internet Explorer 7 |
|---|---|---|---|---|---|
| HTML 2.0 | Quirks | Quirks | Quirks | Quirks | Quirks |
| HTML 3.x | Quirks | Quirks | Quirks | Quirks | Quirks |
| HTML 4.01/XHTML Transitional | Standards | Almost-standards | Almost-standards | Almost-standards | Almost-standards |
| HTML 4.01/XHTML Strict | Standards | Standards | Almost-standards | Almost-standards | Almost-standards |
| HTML5 | Quirks | Standards | Almost-standards | Almost-standards | Almost-standards |
Summary:
- Older browsers and older web pages would either be written to old standards or to no standards whatsoever. If a newer browser tried to update its rendering engine to meet the standards, it risked breaking existing websites.
- To get around this, browser developers implemented two rendering modes, quirks mode for older pages and standards mode for newer pages that conformed to the standards.
- There is a third rendering mode, almost-standards mode, which is mostly like standards mode aside from the way it handles table cells, which is like quirks mode.
- The browser knows which mode to use by the document type declaration, or doctype, on the first line of the page.
- HTML5's doctype is
<!DOCTYPE html>. Any page with it renders in standards mode.- There are plenty of other doctypes, but you don't need to know any of them.