Web development encompasses a range of languages such as HTML, CSS, JavaScript, Java, Python, SQL, PHP, and more.
For these languages to work correctly and cohesively on a webpage, it's critical to declare the "doctype" or Document Type Declaration. The doctype essentially instructs browsers how to interpret and render the document.
Let’s take a closer look at the 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:
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:
Here’s the XHTML 1.0 strict declaration:
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.
HTML5 Doctype
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:
It will appear on the same line as the HTML <!DOCTYPE> 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.
![HTML Projects for Beginners: How to Create a Personal Portfolio Page [Step-by-Step]](https://www.hubspot.com/hubfs/personal_portfolio.png)
![How to Embed Google Map in HTML [Step-By-Step Guide]](https://www.hubspot.com/hubfs/Google%20Drive%20Integration/How%20to%20Embed%20Google%20Map%20in%20HTML%20%5BStep-By-Step%20Guide%5D-2.jpeg)
![How to Create an HTML Tooltip [+ Code Templates]](https://www.hubspot.com/hubfs/Google%20Drive%20Integration/How%20to%20Create%20an%20HTML%20Tooltip%20%5B+%20Code%20Templates%5D.jpeg)
![How to Make an HTML Text Box [Examples]](https://www.hubspot.com/hubfs/html-text-box.webp)
