A view about the HTML doctype shows why it is used, its different types, and how it helps the browser identify its rendering mode.
Introduction
When I started with HTML, I ignored the DOCTYPE declaration before the root <html> element. For some reason, my mind tells me it doesn't matter.
However, I realized how important this is because it tells the browser what to expect. Moreover, when you left this out or forgot to add it as part of the HTML document, your browser is in a different rendering mode.
That’s why this post will show the significance of a doctype declaration.
OK, let's get started.
What is the Document Type Definition?
HTML document follows defined rules, and these rules are inside the Document Type Definition, also known as DTD.
Document Type Definition (DTD) is a declaration at the start of SGML-family markup languages like GML, SGML, XML, and HTML, which specifies the structure of a document that describes the tags, attributes, and values allowed in the markup language.
That's why you'll see different DTD for a corresponding HTML version; more on this later.
See an example below for us to see what's inside a DTD looks like (we have chosen the loose.dtd).
<!ENTITY % coreattrs
"id ID #IMPLIED -- document-wide unique id --
class CDATA #IMPLIED -- space-separated list of classes --
style %StyleSheet; #IMPLIED -- associated style info --
title %Text; #IMPLIED -- advisory title --"
>
What is the Document Type Declaration?
A doctype is a declaration that starts at the document of an HTML page.
It contains the name and a URI for the DTD that describes it with a DTD embedded in the document itself.
Here are some things to remember about doctype:
- DOCTYPE (Document Type Declaration)
- This declaration isn’t an HTML element/tag.
- This doctype declaration comes first.
- It provides the needed information by the browser of what kind of document to expect.
Why Is the Document Type Declaration Used?
In the simplest term, a doctype checks if the HTML page is well-formed, and browsers will know how it should be rendered (because browsers have two types of rendering mode) or layout the page if doctype is declared.
Here are some things to remember about why doctype is used:
- Browsers determine what rendering mode it should use.
- Markup validators check and look at the doctype of the HTML page.
Types of Rendering Modes
Quirks Mode
This mode is the browser's manufacturers' attempt to make their software behave as the browser goes back to the 1990s because it will emulate Navigator 4 and IE5. Moreover, when developers made a typo error in the doctype declaration or left it out, this will be the browser's altered state mode. Then, again your browser will behave and pretends as it was in the 1990s era. Therefore, without a doctype or correct doctype declaration, your HTML page that comes with your stylesheets may not look and behave as expected.
Standards Mode
This mode will be the browser's expected behavior that respects the implemented HTML and CSS standard specifications.
If you are a bit curious, you can use the code below to check what mode your browser is currently using.
You can play around by placing and removing the doctype declaration that you want.
(document.compatMode === 'CSS1Compat' ? 'Standards': 'Quirks') + ' Mode';
Doctype for Different HTML Versions
HTML 4.01 Strict, Transitional, and Frameset DOCTYPE
<!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">
XHTML 1.0 Strict, Transitional and Frameset DOCTYPE
<!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">
XHTML 1.11 DTD DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML 5 DOCTYPE
<!DOCTYPE html>
Final Thoughts
Should I include the doctype declaration?
In my view, it is vital always to include the DOCTYPE declaration as it will put your browser into quirks mode.
Why doesn't HTML5 have any DTD?
You are correct HTML5 lacks DTD, and based on my research, it says here that:
"HTML5 is no longer formally based upon SGML, and the DOCTYPE no longer serves this purpose and no longer needs to refer to a DTD".
Does HTML5 simplify things?
The answer to this is yes. Fortunately, today, it's straightforward to get the DOCTYPE correctly using HTML5, and because it is the standard today, things are easy.
Just put this at the top of your HTML file you're good to go.
If HTML5 simplifies things, what should I bother knowing about HTML4 and XHTML1?
In my opinion, it doesn't hurt knowing this stuff. However, there are still a lot of legacy web applications today being maintained by enterprise companies. Thus, these legacy web applications have a higher chance of still using old versions of HTML and using the old doctypes. Therefore, it is to be aware of these old versions.
If you think, why not just upgrade? Well, that's not for me to answer. There could be a variety of reasons.
Is it OK to have two DOCTYPE in a single HTML document?
In my view, it doesn't any make any sense because it will make the browser confused.
However, technically only a single declaration is permitted.
You can use the validator to see what it says if you have combined two different or same DOCTYPE.
Let me know in the comments. :-)
History
- 26th January 2021: Initial version
