Five years ago I failed a technical interview at one of the big LATAM unicorns. My weak spot wasn't building things; it was explaining the fundamentals. So I started writing this series. In 2026, after years as a frontend engineer, I'm rewriting it with what I know now.
My path into tech wasn't straight: social anthropology first, then teaching STEAM workshops, then frontend. Building came naturally. Explaining why things work took practice.
That's what this series is for: the questions that look simple in an interview but have a lot underneath. And we start with the very first line of every HTML file.
The short answer
<!DOCTYPE html> tells the browser to render the page in standards mode, following modern HTML and CSS specifications. Without it, browsers fall back to quirks mode, which imitates the behavior of very old browsers, and your layout can break in subtle ways.
If you remember one sentence for the interview, make it that one.
The longer answer
It's not an HTML tag
<!DOCTYPE html> looks like a tag, but it isn't an element. It's a document type declaration, a preamble that sits before the <html> element. It doesn't render anything and doesn't appear in the DOM as a normal node.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My page</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
It must be at the very top of the document. Only whitespace and comments are allowed before it, and even comments are best avoided.
Why it exists: browser modes
In the late 1990s, browsers implemented CSS in their own, often incorrect, ways. Millions of pages were built around those bugs. When browsers started following the standards properly, they had a problem: fixing the bugs would break old websites.
The solution was to have different rendering modes:
| Mode | When it's used | Behavior |
|---|---|---|
| Standards mode |
<!DOCTYPE html> present |
Follows the HTML and CSS specs |
| Quirks mode | No doctype, or a malformed one | Emulates old browser bugs |
| Limited-quirks mode | Some legacy doctypes (like HTML 4.01 Transitional) | Almost standards, with a few old behaviors around images in tables |
The doctype is the switch.
What actually breaks in quirks mode
A few classic differences:
- Box model: some elements, like tables and form controls, size differently, closer to the old Internet Explorer model where padding and borders were included in the width.
-
Percentage heights: elements with
height: 100%can behave differently when parents don't have an explicit height. - Inline images: the small gap below images in table cells behaves differently.
- Font inheritance in tables: tables may not inherit font size from the page.
These bugs are hard to debug because nothing looks obviously wrong in your CSS.
You can check the mode yourself
Open the DevTools console on any page and run:
document.compatMode
// "CSS1Compat" → standards mode
// "BackCompat" → quirks mode
Try it on a file without the doctype and you'll see the difference. This is a great detail to mention in an interview: it shows you've actually checked.
A bit of history
Before HTML5, doctypes referenced a DTD (Document Type Definition), a file describing which elements and attributes were valid. They looked like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
There were several flavors (strict, transitional, frameset) and nobody memorized them. HTML5 is no longer defined with a DTD, so the doctype became the shortest string that still triggers standards mode in every browser: <!DOCTYPE html>.
Is it case-sensitive?
No. <!DOCTYPE html>, <!doctype html> and <!DocType HTML> all work. Lowercase <!doctype html> is very common in modern codebases; pick one and be consistent.
How to answer in an interview
A strong, short answer:
"
<!DOCTYPE html>is a declaration, not an element. It tells the browser to use standards mode. Without it, browsers use quirks mode to stay compatible with very old sites, which can change things like the box model and how heights are calculated. Before HTML5 it pointed to a DTD; now it's just<!DOCTYPE html>. You can check the mode withdocument.compatMode."
That covers what it is, why it matters, a bit of history and a practical detail. That's usually what interviewers are looking for: not a memorized definition, but proof that you understand the why.
Possible follow-up questions
- What's the difference between standards mode and quirks mode?
- What happens if you put a comment or whitespace before the doctype?
- What's a DTD, and why doesn't HTML5 use one?
- Why does
<html lang="en">matter? (Hint: accessibility and screen readers. That one's coming in a future post.)
Next in the series: variables, scope and hoisting in JavaScript.
Did you ever get asked about the doctype in an interview? Tell me how it went 👇
Top comments (2)
DOCTYPE can't be removed from the standard unless all the old web pages that rely on it not being there are erased from the WWW. In many ways, the opposite is true. The way that browsers behave when faced with a HTML document that doesn't start with a DOCTYPE has been standardized. That's why the HTML5 spec doesn't refer to "quirks-mode", "almost standards mode" and "standards mode", but to "quirks mode", "limited-quirks mode" and "no-quirks mode", i.e. because all three are "standard".
It follows from that, that
<!DOCTYPE html>at the start does not indicate a HTML5 document. In fact, a document that contains no DOCTYPE is also an (albeit invalid) HTML5 document, just one that will be rendered using quirks mode.greatest do more blogs!!!