HuntExams Academy logo
HTML/CSSBeginner#html#doctype

What does the DOCTYPE declaration do?

Answer

<!DOCTYPE html> tells the browser to render the page in standards mode using HTML5 rules, rather than quirks mode which emulates old buggy browser behavior. It must be the very first line of an HTML document.

Example

<!DOCTYPE html>
<html lang="en">
<head><title>Page</title></head>
<body></body>
</html>

Detailed explanation

The DOCTYPE declaration is a special instruction at the beginning of an HTML document. For modern HTML, write <!DOCTYPE html> before the <html> element. Its main practical purpose is to make browsers render the document in standards mode rather than quirks mode. Standards mode follows modern web specifications, while quirks mode preserves certain historical browser behaviours so that older websites can still display as originally intended. DOCTYPE is not an HTML element, does not appear on the page, and needs no closing tag.

When a browser parses an HTML document, it examines the initial markup, including the DOCTYPE, to choose a rendering mode. A missing DOCTYPE normally triggers quirks mode for a document served as text/html. Some legacy declarations can trigger limited-quirks mode, also called almost-standards mode, which retains a small number of compatibility behaviours. This choice affects layout calculations and other rendering details. For example, quirks mode can change how CSS width is interpreted for certain boxes, leading to unexpected differences in sizing and spacing.

The modern declaration is deliberately short: <!DOCTYPE html>. Older HTML versions commonly used longer declarations containing public identifiers and references to document type definitions, or DTDs. Modern HTML does not require a DTD reference, and browsers do not download a DTD to validate the page before displaying it. Although the declaration is commonly described as selecting HTML5, it is more accurate to say that it requests standards mode; it does not lock the browser to a particular HTML version or guarantee that the markup is valid.

In practice, put <!DOCTYPE html> on the first line, followed by <html lang="en">, <head>, and <body>. Technically, leading whitespace or comments can precede it in HTML without necessarily preventing standards mode, so “must be the first line” is a useful convention rather than an absolute parser requirement. Interviewers mainly expect you to connect DOCTYPE with predictable rendering, explain standards versus quirks mode, and recognise that validation and rendering-mode selection are separate concerns.

Key points to remember

  • <!DOCTYPE html> requests standards mode for modern HTML documents.
  • Quirks mode preserves legacy rendering behaviours that can affect CSS layout.
  • DOCTYPE is a declaration, not an HTML element or a visible page component.
  • Place it at the beginning of the document, before the <html> element.
  • It neither validates markup nor locks the browser to a specific HTML version.

Common mistakes candidates make

  • Saying DOCTYPE imports HTML5 features or causes the browser to download a DTD.
  • Assuming omitting DOCTYPE stops the page from loading; it normally changes the rendering mode instead.
  • Claiming the first-line position is an absolute requirement, without distinguishing it from the recommended convention.

Likely follow-up questions

How can you check whether a page is in quirks mode?

Inspect document.compatMode in the browser console. "BackCompat" indicates quirks mode, while "CSS1Compat" indicates standards or limited-quirks mode, so this property does not distinguish the latter two.

Is <!DOCTYPE html> case-sensitive?

In HTML syntax, the DOCTYPE keyword and the name html are ASCII case-insensitive. The conventional spelling is <!DOCTYPE html>, which is clear and widely recognised.

Does standards mode mean the HTML contains no errors?

No: standards mode selects rendering behaviour, not markup validity. Browsers still recover from many HTML errors, so use an HTML validator to check document conformance.

Interview tip: Start with the declaration and its standards-mode purpose, then briefly contrast quirks mode and give one CSS layout consequence.

Related Interview Questions

1
HTML/CSSIntermediate#html#doctype

What is quirks mode vs standards mode?

Open
2
HTML/CSSBeginner#html#meta

What are the important meta tags in an HTML document?

Open
3
HTML/CSSBeginner#html#meta

What does the viewport meta tag do and why is it needed?

Open