This site uses cookies for analytics. By continuing to browse this site, you agree to this use.
An OpenJS Foundation Project

Modern DOCTYPE

Modern DOCTYPE

This hint checks if the HTML is using the most modern document type declaration (a.k.a. doctype).

Why is this important?

In HTML, the doctype is the required “<!DOCTYPE html>” preamble found at the top of all documents. Its sole purpose is to prevent a browser from switching into so-called “quirks mode” when rendering a document; that is, the “<!DOCTYPE html>” doctype ensures that the browser makes a best-effort attempt at following the relevant specifications, rather than using a different rendering mode that is incompatible with some specifications.

From MDN glossary for DOCTYPE specification.

What does the hint check?

This hint checks if the HTML is using the most modern document type declaration (a.k.a. doctype).

Examples of the doctype declaration:

<!doctype html>

<!DOCTYPE html>

It checks that the doctype is in the first line. If there are lines preceeding the doctype, it checks that these lines consist of whitespace only. This is important as some browsers, including versions of Internet Explorer prior to version 10, trigger quirks mode if a comment occurs before the doctype.

It also checks that the doctype is not duplicated elsewhere in the document.

Although an alternative legacy compatibility doctype is available, this hint does not recommend it. It is a common misconception that the legacy compatibility doctype refers to compatibility with legacy browsers, when, in fact, it is used to deal with compatibility issues with outdated XML tools.

Examples that trigger the hint

The hint will trigger if the preceeding line or line before the doctype contains anything other than whitespace.

<!--first line taken up by this unnecessary comment-->
<!doctype html>

The hint will trigger if you use an old doctype:

<!doctype html PUBLIC
  "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The hint will will trigger if there are multiple doctypes:

<!doctype html>
<!--some content below the doctype-->
<!doctype html>
<!--more content below the second doctype-->

The hint will trigger if a legacy compat doctype is used:

<!doctype html SYSTEM "about:legacy-compat">
<!--all content below the doctype-->

Examples that pass the hint

A doctype in the first line.

<!doctype html>
<!--all content below the doctype-->
<!DOCTYPE html>
<!--all content below the doctype-->

How to use this hint?

This package is installed automatically by webhint:

npm install hint --save-dev

To use it, activate it via the .hintrc configuration file:

{
    "connector": {...},
    "formatters": [...],
    "parsers": [...],
    "hints": {
        "doctype": "error",
        ...
    },
    ...
}

Note: The recommended way of running webhint is as a devDependency of your project.

Further Reading