Doctype

Sunday, March 12, 2023.

Why use Doctype?

Doctype role is to let the browser know what type of document it is expected to render.

By clearly telling the browser exactly what kind of document it needs to display (most likely a web page), you can ensure that it will render that document the exact way you have designed it.

The Doctype

Before an internet browser displays a page, it must first _render_ it. That is to say, build the final version of the page, which will be presented to each visitor of a Web site.

To do so, it just follows a set of instructions given to him via the HTML language. A set of tags allowing to describe the content of the page (by example the text of this article) as well as various information (like JS and CSS resources needed to correctly display the page).

HTML language is not really a *programming* language, but more exactly a *description* language. If it allows you to describe any page elements to be displayed, you will have to use JavaScript scripts to perform operations like interacting with a visitor, recording statistics, etc...

Like any other computer language, HTML is constantly evolving. New versions are released from time to time. The latest of them , version 5 (HML5), was released in October 2014, succeeding to the previous 4.01 version (HML4).

HTML Language developments are ratified by the World Wide Web Consortium.

For a browser to be able to render a web page exactly as it was designed, it needs to know the exact HTML version with which this page was created. Then it is necessary to give it as soon as possible all the information that are required.

And this is precisely the role of the Doctype declaration: specifying the type of a document ( Document type = document type)

Inspecting a page Doctype

It is really easy to inspect the doctype of any web page displayed in a web browser.

To do so, you just need to open the browser developer tools (press the F12 key for Google Chrome, Microsoft Edge, Firefox, like most other browsers). Then choose the Elements tab.

Now as the Doctype declaration is the first to appears at the very beginning of the document, it can easily be spotted...

Structure of an HTML page

Any HTML page is structured with the same main elements.

First of all, the Doctype, which clearly indicates to the navigator the type and the version of the language used to build it.

Then come, contained inside the <html> tag, the content of the page.


<!DOCTYPE html>

<html>

<head>
<!-- Page information ( scripts js, css, fonts, titre, description, etc...) -->
</head>

<body>
<!-- Page content to be displayed to a visitor ( blog post, tutorial, ...) -->
</body>

</html>

HTML5 Doctype

As of this year 2023 Version 5 of the HTML language is the latest, and then the most used version. It was adopted in October 2014 by the WC3 (World Wide Web Consortium) and, bringing multiple improvements for both the developers and the users, it has since replaced previous versions.

The syntax of the HTML5 Doctype declaration could not be easier, as it is only intended to specify that the current document uses the latest released version of the HTML language:


<!DOCTYPE html>

It is important to know that because Version 5 is the most recent, this is the one the browser will use by default.

HTML4 doctype

Previous HTML versions, which have no longer any real reason to be used, required a more complex declaration.

An HTML4 Doctype could be defined in this way:


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

Particularities of the Doctype instruction

The Doctype does not really belong to the HTML language (for example, it can also be used in an XTML page).

It is therefore not an HTML tag. So unlikely to a html tag that must be closed (& lt; html & gt; ... & lt;/html & gt;) the Doctype Declaration does not contains any other HTML tag. And that's why it should not be closed at the end of the document.

If the doctype instruction is generally written in capital letters, it is case insensitive. The following declarations are then equivalent:


    <!DOCTYPE html>
    <!DocType html>
    <!Doctype html>
    <!doctype html>

Consequences of using an incorrect doctype

The most serious consequences of using an incorrect doctype would be some small display errors such as:

Visual glitches, incorrect offsets for some elements displayed on page (incorrect margins, incorrect dimensions, spaces ...)
Absence of certain HTML elements

Using Doctype with Visual Studio Code

If you use Visual Studio Code, you can press the key [!] then [tab] to insert the main skeleton of a new HTML or PHP page, which will include the appropriate doctype.

For example:


<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>

<body></body>

</html>