What is doctype in HTML?

HTML

The short answer

<!DOCTYPE html> is the very first line of an HTML document. It is not an HTML tag or element, and it has no closing tag. It is an instruction to the browser that tells it which version of HTML the page uses. In practice, its job today is to make the browser render the page in standards mode instead of quirks mode.

What it looks like

The doctype must be the first thing in the document, before the <html> element:

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

It is case-insensitive, so <!doctype html> is equally valid. There is nothing to configure: this single line is the entire HTML5 doctype.

Standards mode vs quirks mode

This is the real reason the doctype matters. When the browser sees a valid doctype, it renders the page in standards mode and follows the modern CSS and HTML specifications. When the doctype is missing or malformed, the browser falls back to quirks mode, where it emulates the non-standard behavior of old browsers from the 1990s to keep legacy pages working.

The clearest example is the box model. In quirks mode, the old Internet Explorer 5 box model applies, where padding and border are counted inside the declared width:

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}

In standards mode the box is 250px wide (200 + 20 + 20 + 5 + 5). In quirks mode it stays 200px wide and the padding and border eat into the content. Leaving out the doctype is the difference between layouts that behave consistently and layouts that break in hard-to-debug ways.

HTML5 vs older doctypes

The HTML5 doctype is short. Older versions of HTML and XHTML used much longer declarations that pointed to a DTD (Document Type Definition):

<!-- HTML5 -->
<!DOCTYPE html>
<!-- HTML 4.01 Strict (old, verbose) -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Those older doctypes referenced a DTD file that described the rules of that HTML version. HTML5 dropped the DTD reference entirely, which is why the declaration is reduced to just <!DOCTYPE html>. It still triggers standards mode, it just no longer needs the URL.

Interview Tip

The point interviewers want to hear is that the doctype is not a tag and is not about validating your HTML. Its purpose is to trigger standards mode so the browser uses the modern rendering rules. The practical takeaway: always put <!DOCTYPE html> as the first line of every page so your layout renders consistently across browsers.

Why interviewers ask this

This question is a quick check of how well someone understands the fundamentals. Many developers type <!DOCTYPE html> from memory without ever asking what it does. Interviewers use it to tell apart candidates who copy the line out of habit from those who understand how the browser treats their markup, not just how the page looks on screen.

‹ PreviousWhat are the pros and cons of CSS preprocessors?Next ›What are common CSS efficiency gotchas?