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" |
| Alternatives | No |
| Polyfills | No |
| Graceful degradation | No |
| 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 |