When an HTML page is missing a Document Type Definition (DOCTYPE or DTD) declaration, the browser won’t be able to interpret it correctly. If you don’t want your website to be displayed as if it was made in the 90s, you need to understand the importance of the DOCTYPE and know how to get the right one.
What Does “Doctype Not Declared in HTML” Mean?
The error looks like a warning: “Doctype must be declared first.” The browser needs to understand which types of HTML and CSS you are using and render the page in standard mode. The absence of the DOCTYPE or its incorrect usage will force the browser to switch to quirks mode. It means that the browser will do its best to layout the page that is considered to be old or created against web standards.
This video by John Morris will give you a better idea of how the DOCTYPE declaration looks in practice.
Note that the DOCTYPE is optional for XML files, as these are handled in standard mode by default.
What Triggers This Issue?
The warning about the need to declare a DOCTYPE may be caused by several reasons:
- The DOCTYPE line was never added or was deleted by accident/after an update.
- You have declared the DOCTYPE but used the wrong type that does not correspond with the type of document.
- You made a mistake while writing the code.
How To Check the Issue
Declaring a DOCTYPE is the first thing you need to do when you start writing an HTML document. It comes in the first line before any tags. To check if there is this line, you may access your HTML document and look for a declaration at the top of the code. You can also check it by right-clicking on the webpage and choosing “View Page Source.”
Additionally, with Sitechecker, you can monitor this issue. Simply conduct an audit to identify all pages lacking a DOCTYPE declaration in HTML.
Just by clicking on the issue, you will be presented with a list of affected pages and ability to view their source code.
Set the foundation of your HTML right!
Unsure if you've declared a DOCTYPE? Launch an audit to ensure your markup starts strong!
Why Is This Important?
If you want your website to be displayed correctly in every browser, you need to specify which HTML and CSS you are using. Otherwise, the webpage’s content will take longer to process, and the result may not be successful. Each browser will show the page differently; the elements will be displayed incorrectly. It may hide some components while facing the errors that existed in older browsers.
How To Fix the Issue
If using WordPress, you need to go from your Dashboard to Appearance > Theme Editor. On the right side, you will see a header.php file. You should check the first line: if the DOCTYPE declaration is missing, insert it by typing <!DOCTYPE html>. Note that in Angular, the declaration needs to be done in the index or main HTML file.
The line containing <!DOCTYPE html> works for HTML5 documents. In older versions like HTML4 or XHTML, the declaration is more difficult and contains more information. This article may help you understand which DOCTYPE should be used according to the type of document.
