HTML DOCTYPE: Everything you need to know

October 1, 2020 / HTML, Other tutorials / 5 min

If you work in development, especially on the web, you’ve probably seen the Doctype element in HTML. So, do you know what Doctype HTML is and its use?

In this article, we will understand the definition of the HTML Doctype and how to use it. If you don’t know what HTML is, we recommend that you start studying through our article about this.

The topics in this article are:

What is HTML Doctype?

Despite the similar syntax, Doctype is not considered an HTML tag.

The Doctype HTML element can be defined as a declaration that tells the browser which version of HTML is used in the file.

This declaration comes before HTML tags. This declaration comes before HTML tags. Therefore, it must be declared in the first line of an HTML code.

Until version 4, HTML was based on SGML. Therefore, the declaration of Doctype was made through the DTD (Document Type Declaration) mode.

As of version 5, HTML is no longer based on SGML, and thus simplified even the doctype declaration.

In HTML5, the newest version of HTML, it’s not necessary to declare a specific version. So, you can declare the Doctype easily. To understand, you can see in the example below an HTML5 Doctype declaration. You can note it appears that no version is declared.

<!DOCTYPE html> 
<html>
	<!--HTML Code-->
</html>

All current browsers support the newest version of HTML. However, there are still page documents based on previous versions of HTML that you can find on the WEB. So let’s get to know some of them through the doctype element.

How to declare Doctype in HTML?

As explained earlier, the doctype should be declared before the HTML tags. You should do this declaration in the first line of code.

Throughout the HTML and XHTML versions, the way to you declares the doctype has been modified after the HTML5. Previously, you should write a very long line of code. Nowadays, with version 5, you can do it simply, containing only 2 “words”.

The doctype declaration is not case sensitive. That is, it does not differ from uppercase to lowercase letters. Therefore, you can write as you prefer. You can see in the examples below several possible ways to declare Doctype in the new HTML5 format.

<!DOCTYPE HTML> 
or
<!DOCTYPE html> 
or
<!doctype html> 
or
<!doctype HTML>
...

In the following topics, you can learn about some of the variations of this statement in other versions of HTML and XHTML.

The Doctype in HTML5

From the new version of HTML, HTML5, the doctype declaration has been simplified. Just declare as <! DOCTYPE html>:

<!DOCTYPE html>

Doctype in HTML 4.0.1

If you need to use an older version of HTML, it is important to know the doctype statements. In version 4.0.1 of HTML, you should know three different ways to declare the doctype.

In HTML 4.01, the HTML doctype declaration refers to a DTD (Document Type Declaration), as it was based on SGML. The DTD specifies the rules for markup languages so that browsers render the content correctly.

HTML 4.01 Strict

This DTD contains all HTML elements and attributes but does not include elements of presentation or deprecated. In this case, you cannot use framesets either. For this form, you can declare according to the code below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

This DTD contains all HTML elements and attributes, including presentation and deprecated elements. However, just like Strict, you cannot use Framesets. For this form, you can declare according to the code below

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

This DTD has all the functionality of HTML 4.01 Transitional, however, this is the only one where you can use Framesets. For this form, you can declare according to the code below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Doctype in XHTML

XHTML 1.0 Strict

This DTD contains all HTML elements and attributes but does not include elements of presentation or deprecated. However, you cannot use Framesets. The markup should also be written as well-formed XML. For this form, you can declare as in the code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

This DTD contains all HTML elements and attributes, unlike the doctype Strict, it also contains the presentation and deprecated elements. However, in this one, you cannot use framesets either. The markup should also be written as well-formed XML. For this form, you can declare as in the code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

This DTD is the same as XHTML 1.0 Transitional, however, this format allows you to use Frameset. For this form, you can declare as in the code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

This DTD is the same as XHTML 1.0 Strict, with a slight difference. In XHTML 1.1 you can add modules. For this form, you can declare as in the code below

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Is the use of Doctype mandatory?

Basically, we can say that an HTML document is composed of HTML tags. We already know that since the HTML5 version, DTD is not a mandatory requirement. That way, from HTML5, even if you forget to declare the Doctype, the document will be read correctly. Therefore, we could say that the use of Doctype is no longer mandatory.

However, the presence of the DTD ensures that the browser will behave properly and accurately. When we do not inform Doctype HTML, the browser uses a feature called “quirks mode“. With this mode, the browser can decide a pattern to be followed. When the declaration is made, the browser enters the standard mode. In this way, the browser will follow all HTML and CSS specifications accordingly.

In addition, the lack of Doctype HTML, as well as the browser quirks mode, can lead to vulnerability flaws. The lack of this declaration, even in newer browsers, makes pages vulnerable to attacks such as RPO (Relative path Overwrite), which acts in the injection of style sheets.

Therefore, we should not state that the doctype is not mandatory. W3C itself guides its use. Therefore, the use of Doctype HTML is essential for any document. Therefore, its use is mandatory in view of good practices and also to guarantee the perfect functioning and security of the document.

Doctype for email clients

Despite the great advances achieved in recent times, development for e-mail has not evolved in the same way as development for web. Therefore, there is still no standard to be followed for HTML in emails.

Although most of the most modern and popular email clients already have HTML5 as standard, it is not always a good choice to use it. This is because some email clients still have difficulty handling this version.

According to an article by Campaign Monitor, (published on November 2010, updated in May 2019), the most suitable method for you to be able to use in emails is using the version for XHTML 1.0 Transitional, that is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Therefore, it is important to identify your goal when sending the email and to know the recipients of it well. You can also check which version of Doctype HTML the email client supports through the email client test.

The future of Doctype HTML

As you saw earlier, although it looks like a simple resource, it is very relevant to understand the importance of declaring Doctype HTML. This way, you can be avoiding problems in the document, as well as helping to correct errors and keeping it as safe and modern as possible!

Talking about the future of doctype in the next versions of HTML may seem like an unknown quantity. But it is actually simple. We know that HTML5 is no longer based on SGML, so the doctype is no longer a DTD that reports the specific version of HTML. Since then, you can use the doctype only to inform the browser that the document is in HTML. From that information, the browser can process and manipulate the document for the most current version of HTML.

This way, we can conclude that all the next versions of HTML, will keep the declaration in the same way that they work in HTML5: <! DOCTYPE html>.

Was this helpful?

Thanks for your feedback!

Rafael Marques

https://ialife.com.br/

Brazilian Web Developer and Writer!