HTML5 Doctype Declaration
HTML5 Doctype Declaration
<!DOCTYPE HTML> is also known as document type declaration and is written at the top of every HTML document. In this HTML5 Doctype Declaration Tutorial, we’ll teach you everything that you need to know about Doctype.
The DOCTYPE declaration instructs the browser in which version of HTML code is written.
The goal behind the document’s declaration is to ensure that all the HTML5 web pages are parsed in the same way across different web browsers.
Before the advent of HTML5, HTML 4.0 is used to mention document type definition (DTD). A DTF defines the structure of an XML document.
Since HTML 4.01 was based on Standard Generalized Markup Language (SGML), mentioning DTD in the document declaration was crucial.
Furthermore, while declaring doctypes for HTML 4.01, we are restricted to declare either this doctype separately is strict, transitional, or frameset DTD.
- Strict DTD: for webpages that don’t include elements and attributes that W3C is likely to eliminate as CSS support grows.
- Transitional DTD: used for web pages with attributes and elements that W3C is likely to discontinue as CSS support grows in the foreseeable future.
- Frameset DTD: used for web pages with frames.
In stark contrast to that, HTML5 Doctype is straightforward. It no longer requires us to refer to DTD because, unlike its predecessor, it doesn’t rely on SGML.
Let’s have a momentary glance at the code snippets to declare document type in HTML 4.01 and HTML5.
Examples for HTML5 Doctype Declaration
HTML5 Doctype Declaration in the code:
<!DOCTYPE html>
Doctype code snippet for strict HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Doctype declaration for transitional HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Doctype declaration for frameset HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Browsers Support
| Browsers | Supported |
|
Google Chrome
|
Yes |
| Microsoft Edge
|
Yes |
|
Opera
|
Yes |
History of HTML5 Doctype Declaration
During the initial days of HTML, web standards were not decided. Browser vendors were free to develop new features in their desired format. There was little to no concern for building a capable browser.
As a result, web developers had to choose an appropriate browser for developing their websites. Therefore, sites would not work in unsupported browsers. This disparity could not persist for a prolonged period.
The W3C (World Wide Web Consortium) defined a set of protocols to cope with this problem. All browser vendors should meticulously adhere to these standards. It would ensure that website would work perfectly well across different browsers.
The changes required to keep up with the system are utterly different from existing practices. Adopting them would break all the existing non-standards compliant websites.
To cope with this problem, vendors started implementing programming rendering models in their browsers. Web developers are required to incorporate doctype declaration at the top of an HTML document.
The HTML5 doctype declaration would instruct the browser which rendering mode is crucial for that document.
Three rendering modes were widely available across different browsers:
- Full standard mode renders all the pages by strictly following W3C web standards
- Quirks mode renders all the pages without complying with the standard way.
- Almost common node similar to the full standard model, but supports a small number of quirks.
When HTML5 was first introduced, web standards were completely implemented across all the major browsers. Websites developers adhere to the standards-compliant way.
The only purpose of the HTML5 doctype declaration is to inform the browser to render the document in full standards mode.
HTML5 Doctype Declaration Shortcut
The Doctype Declaration must be the first line of code in every HTML document aside from comments mentioned before when required.
Shortcut code for DOCTYPE HTML5 declaration is:
<!DOCTYPE html>
Below example shows doctype declaration in HTML5
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>
Your content here
</h1>
</body>
</html>
The output of this code will be
