To ensure browsers can parse documents in different languages and display them correctly, it’s important to add a doctype declaration. This basically instructs browsers how to read and render a file.
Let’s take a closer look at doctype HTML below.
What is doctype HTML?
Doctype HTML is a declaration that tells the browser what version of HTML the document is written in. This declaration appears as the very first line in an HTML file.
Here’s an example of an HTML file with a doctype declaration:
<title>This is the Title of the Page</title>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
Let’s take a closer look at the HTML doctype declaration below.
HTML Doctype Declaration
The HTML <!DOCTYPE> declaration is not an HTML element or tag. It is an instruction that tells the browser what type of document to expect.
All HTML documents need to start with a <!DOCTYPE> declaration. The declaration varies depending on what version of HTML the document is written in.
Here’s the HTML4 strict declaration, for example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Here’s the XHTML 1.0 strict declaration:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
In both examples, the information appearing after “PUBLIC” is referring to a Document Type Definition (DTD). A DTD defines the structure of a document and which elements and attributes are valid. In the examples above, the DTD is declared in external files by the World Wide Web Consortium (W3C), which are referenced in quotation marks.
Notice that they both reference strict DTDs, which were used for web pages that excluded attributes and elements that W3C expected to phase out as CSS support grew. There were also transitional and frameset DTDs.
It is no longer necessary to refer to a DTD when writing with the latest version of HTML, HTML5. Let’s take a closer look at the HTML5 doctype declaration below.
In HTML5, the doctype declaration is <!DOCTYPE html>. This is easy to write and remember, particularly when compared to the complicated doctype declarations of previous versions of HTML.
The <!DOCTYPE> declaration is not case sensitive. Although most commonly written in all uppercase, you can write it as lowercase, sentence case, and so on, and the browser will still recognize it as the HTML doctype declaration.
Here are some examples that would be effective:
This tells the browser that this document type is HTML5 so it knows which elements are valid.
For example, the HTML anchor element, <a>, is valid in the HTML5, HTML4, and XHTML doctypes. The HTML acronym element, <acronym>, is only valid for HTML4 and XHTML — not in HTML5. On the other hand, the HTML dialog element, <dialog>, is only valid for HTML5 — not HTML4 or XHTML.
Doctype HTML Unexpected Token
When creating an HTML file with the doctype declaration, it’s possible that you’ll get an “unexpected token” error message. Here’s how it typically looks:
Uncaught SyntaxError: Unexpected token <
To fix this error, you’ll have to replace the file path in your script tag to the correct file path — or you can move the core.js file to the correct location cited in the script tag.
In that case, you can either replace “/Client/public/core.js” or move the core.js file to the location /Client/public/.
Now let’s say you click into Client/public and do see a file named “core.js.” In that case, double check the permissions for both the public folder and core.js file. Either of these might be lacking the proper permissions and therefore causing the “unexpected token” error.
Let's recap everything we discussed in this post, with this handy video.
Understanding the Doctype Declaration
The HTML doctype declaration is a fundamental concept of coding. Every HTML document requires a valid doctype declaration so that the browser displays your web page in the way you intended. Now that you understand this concept, you’re already on the path to learning HTML and CSS.
Originally published Apr 23, 2021 7:00:00 AM, updated June 17 2022