HTML HTML Doctype and Browser Quirks Mode Detection

The HTML doctype at the beginning of a document helps browsers choose standards mode. Without a suitable doctype, older compatibility behavior may change layouts in surprising ways.

What You Need to Know

Write <!doctype html> before the html element. It is a declaration, not a normal opening and closing HTML tag.

The doctype switches modern browsers into standards mode. Omitting it can trigger quirks mode and surprising layout behavior.

Example: See It in Action

Try this markup in a fresh practice file. The next section explains the parts worth paying attention to.

<!doctype html>
<html lang="en">
    <head><title>Standards Mode</title>
    </head>
    <body>
        <h1>Modern document</h1>
    </body>
</html>

Let’s Understand the Example

• The html element holds the complete page and usually names its language.
• The head contains useful page information for the browser, such as its title and character encoding.
• The title names the page in the browser tab. It is different from the heading shown on the page.
• Lang tells tools which language the text uses, helping pronunciation and language-aware features.

Some of the markup affects the browser tab or page settings rather than appearing as visible text. Check the browser tab and inspector as well as the page itself.

What Should You See?

The browser tab should show “Standards Mode”. The page itself shows “Modern document” as a heading; those two labels are allowed to be different.

Read only the headings, from top to bottom. Do they tell a sensible story? If not, move sections or choose levels that match the content.

Try It Yourself

1. Remove the doctype temporarily and compare the document mode in Developer Tools.
2. Save your changes, open or refresh the page, and compare the result with the original example.
3. Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.

Common Beginner Mistakes

• Leaving out the doctype because the page still looks acceptable in one browser.
• Avoid picking tags just for their default bold, italic or spaced appearance. Use CSS for presentation.

Key Takeaways

• The HTML doctype at the beginning of a document helps browsers choose standards mode.
• The html element holds the complete page and usually names its language.
• The doctype switches modern browsers into standards mode. Omitting it can trigger quirks mode and surprising layout behavior.