If you've ever created an HTML document, you've probably noticed that almost every example starts with the same line:
<!DOCTYPE html>It's usually the first thing we type when creating a webpage. We place it above the <html> element and then continue writing our HTML.
But have you ever tried removing it?
Interestingly, your webpage will probably still work. The headings will appear, paragraphs will be displayed, images will load, and even JavaScript can run without it.
So why do we include this line in almost every HTML document?
The answer has something to do with how web browsers evolved. In the early days of the internet, browsers didn't always follow the same rules when displaying webpages. As web standards improved, browser developers had to find a way to support both old websites and new ones.
The DOCTYPE declaration became an important part of that solution.
To understand it properly, we'll first look at what DOCTYPE does, explore a little HTML history, and then try some examples to see how it affects the way browsers display webpages.
What is <!DOCTYPE html>?
DOCTYPE stands for Document Type Declaration.
In modern HTML, <!DOCTYPE html> is a declaration placed at the beginning of an HTML document. Its main purpose is to tell the browser to use standards mode when rendering the webpage.
Here's a basic HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Webpage</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to my webpage.</p>
</body>
</html>Notice that <!DOCTYPE html> appears before the opening <html> tag.
When the browser reads this declaration, it knows that the document should be rendered using modern, standards-based rules.
One thing worth understanding here is that DOCTYPE is not an HTML tag.
For example, <h1> is an HTML tag used to define a heading, while <p> is used to define a paragraph. These elements become part of the webpage's document structure.
DOCTYPE is different. It doesn't represent any visible content and doesn't create an HTML element. Instead, it provides information about how the document should be processed.
It also doesn't require a closing tag.
You simply write:
<!DOCTYPE html>And that's it.
Why was DOCTYPE introduced?
To understand why DOCTYPE matters, we need to look at how websites were developed in the past.
Today, we have well-established HTML and CSS standards. Although browsers can still have differences in implementation, they generally follow the same specifications.
That wasn't always the case.
During the 1990s, browsers such as Netscape Navigator and Internet Explorer competed with one another. Browser manufacturers introduced their own features and sometimes interpreted HTML and CSS differently.
A webpage that looked perfect in one browser could look completely different in another.
Web developers had to deal with these differences, sometimes writing browser-specific code or designing websites around particular browser behaviors.
At the same time, the technologies used to build webpages were quite different from what we're familiar with today.
How websites were designed before modern CSS
Today, if we want to change the appearance of a paragraph, we normally use CSS.
For example:
<p class="message">Welcome to my website!</p>.message {
color: blue;
font-family: Arial, sans-serif;
font-size: 20px;
}CSS gives us a consistent way to control the appearance of HTML elements.
However, before CSS became widely used, developers often relied on HTML itself for presentation.
For example, they could use the <font> tag to change the color, size, and font family of text.
<font face="Arial" color="blue" size="5">
Welcome to my website!
</font>The <font> element tells the browser to display the text using Arial, with a blue color and a particular font size.
You might be surprised to know that modern browsers can still display this HTML.
However, the <font> element is now considered obsolete. We use CSS instead because it separates the content of a webpage from its appearance.
Another popular technique was using HTML tables to create entire webpage layouts.
Let's look at an example.
<html>
<head>
<title>Old Website Layout</title>
</head>
<body>
<table border="1" width="600">
<tr>
<td colspan="2">
<font face="Arial" size="6" color="blue">
My Website
</font>
</td>
</tr>
<tr>
<td width="150">
<font face="Arial" size="4">
Home
About
Contact
</font>
</td>
<td>
<font face="Arial" size="3">
Welcome to my website.
This is the main content area.
</font>
</td>
</tr>
</table>
</body>
</html>In this example, the table isn't really being used to display tabular information. Instead, it creates the layout of an entire webpage.
The first row acts as the website header. The second row contains two columns: one for navigation and another for the main content.
This kind of design was common before modern CSS layout techniques became available.
Now imagine that thousands of websites were created using techniques like this, often relying on the particular layout calculations of browsers available at the time.
As browser developers improved their support for CSS standards, those calculations started changing.
A table might become wider than expected. Text could wrap differently. An image might introduce unwanted spacing. Even a small difference could affect the entire layout.
Browser developers couldn't simply ignore all those existing websites.
They needed to improve standards support while keeping older webpages usable.
That's where browser rendering modes come into the picture.
Understanding browser rendering modes
Browsers can use different rendering modes to decide how they should interpret certain HTML and CSS layout rules.
For our discussion, the two most important ones are standards mode and quirks mode.
There's also a third mode called limited-quirks mode, which we'll discuss shortly.
Standards mode
Standards mode is the normal rendering mode for modern HTML documents.
When a document begins with:
<!DOCTYPE html>the browser uses standards mode.
In this mode, the browser follows modern HTML and CSS specifications rather than reproducing certain older browser layout behaviors.
For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Standards Mode</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>This is the mode we should use when developing new websites.
Quirks mode
Quirks mode exists mainly for backward compatibility.
It allows browsers to reproduce certain historical layout behaviors so that older websites continue to display reasonably well.
For example, consider this HTML document:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Quirks Mode</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>Notice that we've removed the DOCTYPE declaration.
When a modern browser opens a normal HTML document like this, it generally switches to quirks mode.
The webpage doesn't stop working. You'll still see the heading.
However, some CSS layout calculations may behave differently.
This is where beginners sometimes get confused. The difference between standards mode and quirks mode isn't always obvious.
If your webpage contains only a heading and a paragraph, you might not notice anything unusual.
But once you start working with widths, padding, borders, tables, and more complicated layouts, the differences can become noticeable.
Let's try a practical example.
Practical example: What happens when we remove DOCTYPE?
One of the best examples of the difference between standards mode and quirks mode involves the CSS box model.
Before writing the code, let's understand what the box model is.
In CSS, an element can have a content area, padding, border, and margin.
Suppose we create a box with the following properties:
.box {
width: 200px;
padding: 20px;
border: 5px solid blue;
}Here, we've specified a width of 200px, padding of 20px, and a border of 5px.
But what exactly does the 200px width represent?
In the standard CSS content-box model, it represents the width of the content area. The padding and border are added outside that width.
Historically, some older browsers calculated certain element widths differently. They treated the specified width as including the padding and border.
This difference is one of the behaviors quirks mode can reproduce.
Example 1: With DOCTYPE
Create a file named with-doctype.html and add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>With DOCTYPE</title>
<style>
.box {
width: 200px;
padding: 20px;
border: 5px solid blue;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="box">
Hello, World!
</div>
</body>
</html>Open this file in your browser.
Because we've included <!DOCTYPE html>, the browser uses standards mode.
Under the default content-box sizing behavior, the total width of the box is calculated as follows:
Content width = 200px
Left padding = 20px
Right padding = 20px
Left border = 5px
Right border = 5px
Total width = 250pxEven though we specified a width of 200px, the box occupies 250px horizontally, excluding margins.
That's because the width property applies to the content area, while padding and borders add to the total width.
Example 2: Without DOCTYPE
Now create another file named without-doctype.html.
Copy the previous example, but remove the first line:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Without DOCTYPE</title>
<style>
.box {
width: 200px;
padding: 20px;
border: 5px solid blue;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="box">
Hello, World!
</div>
</body>
</html>Now open this file in the same browser.
Since there's no DOCTYPE, the browser enters quirks mode.
In modern browser engines that reproduce the old quirks-mode box model for elements like this, the specified 200px width includes the padding and border.
That means the total outer width can be 200px instead of 250px.
The content area becomes smaller because some of the available width is occupied by padding and borders.
This is a good example of how removing DOCTYPE can affect the appearance of a webpage without producing any obvious HTML error.
Of course, quirks mode doesn't change every CSS property or every element. Its behavior depends on the specific CSS rules and browser compatibility requirements.
Also, modern CSS provides box-sizing: border-box, which allows us to intentionally include padding and borders within an element's specified width, even in standards mode.
The important point is that DOCTYPE helps prevent the browser from silently switching to an older compatibility mode.
What about the HTML table and font example?
Let's return to our earlier example using a table and the <font> element.
You might wonder whether adding DOCTYPE would stop those older HTML features from working.
It wouldn't.
Consider this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Legacy HTML Example</title>
</head>
<body>
<table border="1" width="400">
<tr>
<td>
<font color="red" size="5">
Hello, World!
</font>
</td>
</tr>
</table>
</body>
</html>Even though we've included the modern DOCTYPE declaration, the browser can still render the table and apply the legacy <font> element.
That's because standards mode doesn't mean the browser refuses to recognize every old HTML feature.
Modern HTML specifications include parsing and compatibility rules for many obsolete elements because older webpages still exist.
However, that doesn't mean we should continue using them when writing new HTML.
Instead of using <font>, we should use CSS.
Here's a modern version of the same example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Modern HTML Example</title>
<style>
.message {
color: red;
font-size: 24px;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td class="message">
Hello, World!
</td>
</tr>
</table>
</body>
</html>The table is still there because we're displaying content inside a table cell. But the text styling is now controlled through CSS.
The distinction matters because DOCTYPE and modern HTML practices are two different things.
DOCTYPE selects the browser's rendering mode. Whether your markup follows modern HTML authoring practices is a separate question.
Limited-quirks mode: A third rendering mode
So far, we've discussed standards mode and quirks mode.
However, browsers also support another mode called limited-quirks mode, historically known as almost-standards mode.
As the name suggests, this mode is very similar to standards mode, but it retains a small number of old layout behaviors.
One historical example involves images placed inside table cells.
When CSS standards were adopted, images were treated as inline-level content by default. Inline elements participate in line formatting, which can reserve space for characters that extend below the text baseline.
This sometimes caused a small gap beneath images.
For developers who had built entire layouts using tightly fitted images inside tables, those extra pixels could break the design.
Limited-quirks mode preserved some older behavior to avoid that problem.
Certain historical DOCTYPE declarations can activate limited-quirks mode, but it's rarely something you'll need to work with when creating a new website.
Using the modern <!DOCTYPE html> declaration activates standards mode instead.
How DOCTYPE looked in older HTML versions
If you've come across old HTML tutorials, you may have seen DOCTYPE declarations that are much longer than the one we use today.
For example, HTML 4.01 Strict commonly used:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">HTML 4.01 Transitional used a different declaration:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">These declarations included identifiers associated with Document Type Definitions, commonly called DTDs.
A DTD is a formal description of a document's permitted structure, used in SGML and XML systems.
Older HTML specifications were based on SGML, which explains why those declarations looked different from the simple DOCTYPE we use today.
With HTML5, the declaration was simplified to:
<!DOCTYPE html>We no longer need to include a long public identifier or a DTD URL for ordinary HTML documents.
It's also worth understanding that this declaration doesn't specify an exact HTML version number.
Although we commonly call it the HTML5 DOCTYPE, modern HTML is maintained as a living standard. New features can be introduced without requiring developers to change the DOCTYPE.
Is DOCTYPE case-sensitive?
You might have seen the declaration written in different ways:
<!DOCTYPE html><!doctype html><!DOCTYPE HTML>In ordinary HTML documents, all three forms are recognized.
The DOCTYPE keyword and the document name html are case-insensitive under HTML parsing rules.
However, I recommend using:
<!DOCTYPE html>It's the most familiar convention and the form you'll commonly see in HTML tutorials, documentation, and code examples.
Consistency makes code easier to read, especially when you're learning.
Where should the DOCTYPE declaration be placed?
The DOCTYPE declaration belongs at the beginning of your HTML document, before the <html> element.
Here's the correct structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Webpage</title>
</head>
<body>
<h1>Hello!</h1>
</body>
</html>You shouldn't place it inside the <head> or <body> elements.
For example, the following is incorrect:
<html lang="en">
<head>
<!DOCTYPE html>
<title>My Webpage</title>
</head>
<body>
<h1>Hello!</h1>
</body>
</html>By the time the parser encounters the misplaced declaration, it has already started processing the document.
You should also avoid putting other markup before DOCTYPE.
Browsers can tolerate some things, such as leading whitespace, but the simplest and most reliable approach is to make <!DOCTYPE html> the first line.
How to check whether your webpage is using standards mode
There's a simple JavaScript property that lets us check whether the browser is using quirks mode.
It's called document.compatMode.
You can test it without writing an entire JavaScript program.
First, open any webpage in your browser. Then open Developer Tools, usually by pressing F12, and switch to the Console tab.
Enter the following code:
document.compatModeIf the webpage is using standards mode, you'll typically get:
CSS1CompatIf it's using quirks mode, you'll get:
BackCompatThere's one small detail worth mentioning. CSS1Compat is also returned for limited-quirks mode, so this property doesn't distinguish between standards mode and limited-quirks mode.
Still, it's a useful way to check whether the browser has entered full quirks mode.
You can also use a condition:
if (document.compatMode === "CSS1Compat") {
console.log("The page is not in quirks mode.");
} else {
console.log("The page is in quirks mode.");
}Try this experiment with the two HTML files we created earlier.
Open with-doctype.html and check the value of document.compatMode.
Then open without-doctype.html and run the same command.
You'll see how a single line at the beginning of the document changes the browser's rendering mode.
Does DOCTYPE validate our HTML?
No, and this is something beginners should understand early.
Adding <!DOCTYPE html> doesn't mean your HTML is automatically correct.
For example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Webpage</title>
</head>
<body>
<p>This is <strong>important text.</p>
</body>
</html>Notice the mistake?
We've opened a <strong> element but haven't closed it.
Even though the document contains a valid DOCTYPE declaration, the markup still has a problem.
Browsers are quite forgiving when it comes to HTML. They can recover from many common mistakes and still display a webpage.
But that doesn't mean the code is correct.
If you want to check your HTML, you can use the Nu HTML Checker, which checks markup against modern HTML rules and reports potential errors.
DOCTYPE doesn't replace HTML validation.
Does DOCTYPE affect JavaScript?
DOCTYPE doesn't directly determine whether JavaScript works.
For example, consider this code:
<html lang="en">
<head>
<title>JavaScript Example</title>
</head>
<body>
<button onclick="sayHello()">Click Me</button>
<script>
function sayHello() {
alert("Hello, World!");
}
</script>
</body>
</html>Even though the document doesn't contain a DOCTYPE declaration, the JavaScript can still execute.
The browser can still recognize the <script> element and run the function when you click the button.
DOCTYPE primarily affects document rendering compatibility. It doesn't directly enable or disable JavaScript features.
However, changes in rendering mode can affect certain layout measurements and browser behaviors that JavaScript might interact with.
For that reason, using standards mode is still the sensible choice when developing applications that depend on JavaScript and CSS.
Is DOCTYPE the same as <meta charset="UTF-8">?
No. Both usually appear near the beginning of an HTML document, but they have different purposes.
Consider this example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
</head>
<body>
<h1>Hello!</h1>
</body>
</html>The first line, <!DOCTYPE html>, tells the browser to use standards mode.
The <meta charset="UTF-8"> declaration identifies the character encoding used by the document, subject to the browser's encoding detection rules.
Character encoding determines how bytes are interpreted as characters.
For example, UTF-8 supports English text, Malayalam, Hindi, Japanese, emojis, and many other characters.
Without the correct character encoding, some text may appear as unexpected symbols.
So while DOCTYPE is concerned with rendering compatibility, the charset declaration is concerned with interpreting the document's text correctly.
You should normally include both in a modern HTML document.
Should we always include <!DOCTYPE html>?
For normal HTML webpages, yes.
Even if a simple webpage appears to work without DOCTYPE, there's no real advantage to leaving it out.
Including it makes your intention clear: the page is designed for modern standards-based rendering.
It also helps prevent unexpected compatibility behavior as your project grows.
A webpage that begins with only a heading and paragraph today might eventually contain complex layouts, forms, responsive designs, and interactive components.
Starting with the correct document structure means you won't have to deal with quirks-mode problems later.
For most modern HTML projects, this is the basic structure you should use:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Website</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first HTML document.</p>
</body>
</html>You can use this as the starting point for your HTML exercises and projects.
Final thoughts
It's easy to overlook <!DOCTYPE html> because it doesn't produce anything visible on the screen.
Unlike a heading, paragraph, or image, you can't point to something on a webpage and say, "That's what DOCTYPE created."
Its job happens before the browser renders the page.
It tells the browser which set of compatibility rules to use when interpreting the document. Without it, a normal HTML webpage may enter quirks mode and reproduce some layout behaviors from older browsers.
Those behaviors exist for a reason. Older websites were often built with tables, the <font> element, and browser-specific layout assumptions. When web standards improved, browsers needed a way to keep those websites working.
Today, we don't need to worry about writing long DOCTYPE declarations or choosing between multiple historical HTML document types.
For modern HTML development, the recommended declaration is simply:
<!DOCTYPE html>Put it at the beginning of your HTML document, and you're ready to start writing your webpage.
Practice questions
1. What does DOCTYPE stand for?
DOCTYPE stands for Document Type Declaration. In modern HTML, it helps the browser select standards-based rendering behavior.
2. What happens if we don't include DOCTYPE in an HTML document?
The browser will generally enter quirks mode, where certain layout rules behave differently to support older webpages. The HTML may still display normally, but some CSS calculations can produce unexpected results.
3. Is <!DOCTYPE html> an HTML element?
No. It is a declaration, not an HTML element. It doesn't create any visible content and doesn't require a closing tag.
4. What is the difference between standards mode and quirks mode?
Standards mode follows modern HTML and CSS rendering rules. Quirks mode preserves some historical browser behaviors for compatibility with older websites.
5. Does adding <!DOCTYPE html> make invalid HTML valid?
No. DOCTYPE doesn't validate HTML markup. It is still possible to write incorrect HTML even when the DOCTYPE declaration is present.
6. How can we check whether a webpage is using quirks mode?
Open the browser's developer console and execute:
document.compatModeIf the result is BackCompat, the page is using quirks mode. If it returns CSS1Compat, the page is using standards mode or limited-quirks mode.
7. What DOCTYPE should we use for modern HTML documents?
Use:
<!DOCTYPE html>It's short, supported by modern browsers, and activates standards mode.