Modern DOCTYPE
User guide
- Getting Started
Concepts
Configuring webhint
Connectors
Development flow integration
Formatters
Hints
- AMP HTML validator
- Avoid CSS limits
- Avoid HTTP redirects
- aXe accessibility check
- Babel configuration hint set
- Compatibility of CSS, HTML and JavaScript features
- Correct `Content-Type` header
- Correct manifest extension
- Correct viewport
- Disallowed HTTP headers
- External links disown opener
- Has web app manifest
- Highest document mode
- HTTP cache
- Manifest has name
- Minify JavaScript
- Modern DOCTYPE
- No `P3P` headers
- No broken links
- No byte-order mark
- No protocol-relative URLs
- No small error pages
- No vulnerable libraries
- Nu HTML test
- Optimal compression
- Optimize images
- Performance budget
- Prefixed CSS first
- Specify button type
- SSL server test
- TypeScript configuration hints set
- Unneeded HTTP headers
- Use `Strict-Transport-Security` header
- Use `X-Content-Type-Options` header
- Use Apple touch icon
- Use charset `utf-8`
- Use HTTPS
- Use subresource integrity
- Valid `Set-Cookie` header
- Valid `theme-color`
- Valid manifest
- webpack configuration hints set
Parsers
Server configurations
Telemetry
Troubleshoot
- Concepts
- Configuring webhint
- Connectors
- Development flow integration
- Formatters
- Hints
- Parsers
- Server configurations
- Telemetry
- Troubleshoot
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--> |
The hint will trigger if you use an old doctype
:
<!doctype html PUBLIC |
The hint will will trigger if there are multiple doctype
s:
<!doctype html> |
The hint will trigger if a legacy compat doctype
is used:
<!doctype html SYSTEM "about:legacy-compat"> |
Examples that pass the hint
A doctype
in the first line.
<!doctype html> |
<!DOCTYPE html> |
How to use this hint?
To use it you will have to install it via npm
:
npm install @hint/hint-doctype |
Note: You can make npm
install it as a devDependency
using
the --save-dev
parameter, or to install it globally, you can
use the -g
parameter. For other options see npm’s
documentation.
And then activate it via the .hintrc
or hintrc
configuration file:
{ |