Signup to the waiting list!
Any HTML document must start with a Document Type Declaration (abbreviated doctype) in the first line, which tells the browser the version of HTML used in the page.
This doctype declaration (case insensitive):
tells the browser this is an HTML5 document.
Browser rendering mode
With this declaration, the browser can render the document in standards mode.
Without it, browsers render the page in quirks mode.
If you’ve never heard of quirks mode, you must know that browsers introduced this rendering mode to make pages written in an “old style” compatible with new functionality and standards used. Without it, as browsers and HTML evolved, old pages would break their appearance, and the Web Platform has historically been very protective in this regard (which I think is part of its success).
Browsers basically default to quirks mode unless they recognize the page is written for standards mode.
You want standards mode, and
is the way to get it.
There’s an additional care to be put for Internet Explorer <= 10 users to avoid quirks mode, and it’s to put
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
in the page
<head> tag, before loading any script.
Older HTML versions
HTML has a weird set of versions:
- HTML (1991)
- HTML 2.0 (1995)
- HTML 3.2 (1997)
- HTML 4.01 (1999)
- XHTML (2000)
- HTML5 (2014)
The doctype of an HTML 4.01 Strict document was:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
XHTML was similar:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
They required a DTD (Document Type Definition) because those old HTML versions were based on SGML, a format that defines the structure of a document.
XHTML also required the
html tag to have a namespace, like this:
Those doctype declarations always required you to save the DTD declaration somewhere, as it’s nearly impossible to memorize. Also, there were different DTDs for strict mode or transitional mode (which was less strict).
XHTML is an XML vocabulary, while HTML4 (and lower) is an SGML application. The current HTML, HTML5, is heavily inspired by HTML4, but is not an SGML application, and abandoned many of the strict rules of XHTML.
HTML5 is not based on SGML, but on its own standard, so the DTD is not required, and we benefit from this in this very simple declaration:
More browser tutorials:
- Some useful tricks available in HTML5
- How I made a CMS-based website work offline
- The Complete Guide to Progressive Web Apps
- The Fetch API
- The Push API Guide
- The Channel Messaging API
- Service Workers Tutorial
- The Cache API Guide
- The Notification API Guide
- Dive into IndexedDB
- The Selectors API: querySelector and querySelectorAll
- The Document Object Model (DOM)
- The Web Storage API: local storage and session storage
- Learn how HTTP Cookies work
- The History API
- The WebP Image Format
- XMLHttpRequest (XHR)
- An in-depth SVG tutorial
- What are Data URLs
- Roadmap to learn the Web Platform
- CORS, Cross-Origin Resource Sharing
- Web Workers
- The requestAnimationFrame() guide
- What is the Doctype
- Working with the DevTools Console and the Console API
- The Speech Synthesis API
- How to add a class to a DOM element
- How to loop over DOM elements from querySelectorAll
- How to remove a class from a DOM element
- How to check if a DOM element has a class
- How to change a DOM node value
- How to add a click event to a list of DOM elements returned from querySelectorAll
- WebRTC, the Real Time Web API
- How to replace a DOM element
- How to only accept images in an input file field
- Why use a preview version of a browser?
- The Blob Object
- The File Object
- The FileReader Object
- The FileList Object
- The URL Object
- Typed Arrays
- The DataView Object
- The BroadcastChannel API
- The Streams API
- The FormData Object
- The Navigator Object
- How to use the Geolocation API
- How to use getUserMedia()
- How to use the Drag and Drop API
- How to work with scrolling on Web Pages
- Keyboard events
- Mouse events
- Touch events
- How to remove all children from a DOM element
- How to make a page editable in the browser
- How to remove all CSS from a page at once
- How to use insertAdjacentHTML
- Safari, warn before quitting
- How to reset a form
- How to use Google Fonts