There are many languages inwebsite design. You’ve gotHTML, CSS, JavaScript, Java, Python, SQL, PHP — and these are just a few.

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.

Here’s an example of an HTML file with a doctype declaration:

This is a Heading


This is a paragraph.

Let’s take a closer look at the HTML doctype declaration below.

HTML Doctype Declaration

The HTML 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 declaration. The declaration varies depending on what version of HTML the document is written in.

Here’s the HTML4 strict declaration, for example:

"http://www.w3.org/TR/html4/strict.dtd">

Here’s the XHTML 1.0 strict declaration:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

在这两个例子,后出现的信息“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.

HTML5 Doctype

In HTML5, the doctype declaration is . This is easy to write and remember, particularly when compared to the complicated doctype declarations of previous versions of HTML.

The 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, , is valid in the HTML5, HTML4, and XHTML doctypes. The HTML acronym element, , is only valid for HTML4 and XHTML — not in HTML5. On the other hand, the HTML dialog element,

, 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 <

It will appear on the same line as the HTML declaration, but the reason for this error is not the way you wrote the declaration. Instead, it typically has to do with JavaScript.

For example, if you reference a Javascript file — like core.js — in your HTML file and the browser can’t find this file, then it will prompt the "unexpected token" error. This is a common issue for websites running on an Apache server.

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.

Let’s say your script tag is as follows:

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.

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.