Browse-Crosser

The definitive guide of cross-browser/cross-device Web Development

HTML5 elements > doctype

Element information
Role Document type
Type Preambule (void element)
Introduced in HTML 2 / XHTML 1
Mandatory Yes
If not present Browsers will stay in "quirks mode" (some sort of buggy pre-HTML5 behavior)
Visible No
Stylable No
CSS Selector N/A
Best JS selector N/A
Default style N/A
Hierarchy • It's the first element of the page.
• It's followed by a html element.
Recommen- ded form
<!doctype html>
Comments and techniques • The HTML5 doctype declaration is completely case-insensitive
• Doctype and title are the only two elements that are mandatory in a HTML5 page source code to make it valid.
• To check "standards mode" rendering, use this JS test:
if (document.compatMode !== 'CSS1Compat'){ /* OK */ }
.
• Older and longer doctypes exist, but they are not recommended anymore.
• The HTML5 doctype can have a longer form but that's not useful (see W3C specifications).
• The doctype behaves as a comment in IE<9's DOM.
iframes doctype (and rendering mode) can differ from the main page's doctype.
• On intranet Web pages, IE>6 will stay in "almost standards mode" by default. Follow these steps to disable this setting:
  - Press "Alt" if the Tools menu is hidden.
  - Go to Tools > Compatibility view settings.
  - Unckeck "Display intranet sites in compatibility mode".
  - Click "Close" and restart IE.
Cross-browser use
Browser Support Compatible with all browsers
Feature detection N/A
Known issues • If the doctype isn't at the very beginning of your file, IE<8 will render the page in "quirks mode ".
• If you have to loop through all elements with JavaScript, note that IE<9 counts the doctype element as a comment in getElementsByTagName('*'), while other browsers ignore it.
• With a HTML4 or HTML5 doctype, iframes will get scrollbars on IE6.
• If the main page doesn't have a valid doctype, IE≤10 will render iframes in "quirks mode" even if those iframes have a valid doctype.
Fix • To avoid "quirks mode" on IE<8, be sure to remove any character (space, line break...) before your doctype.
• To remove iframes scrollbars on IE6, use the attribute
scrolling="no"
(however, it's not valid in HTML5)
Alternatives No
Polyfills No
Graceful degradation No
Related links
W3C specifications
CSS-Tricks - The common doctypes
CSS-Tricks - In IE, iFrames on pages in quirks mode also in quirks mode
Lea Verou - 20 things you should know when not using a JS library (#6)
Bruce Lawson - A Minimal HTML5 Document
In my experience - iframe and Doctype follies
Mozilla - Quirks Mode and standards Mode
Dorward - Quirks or Standards Mode Bookmarklet
Demo
This code represents a minimal HTML5 page with two buttons.
The first one confirms that the page doesn't render in "quirks mode".
The second will display the tag name of the first element in the DOM ("HTML" everywhere - even if it's not in the source code, "!" on IE<9).

Code

<!doctype html>
<title>Demo</title>
<button onclick="alert(document.compatMode!=='CSS1Compat');">
	Quirks mode?
</button>
<button onclick='alert(document.getElementsByTagName("*")[0].tagName);'>
	First element?
</button>

Result