The DOCTYPE Declaration.

The <!DOCTYPE html> declaration is the very first line of an HTML document. It tells the browser which version of HTML the page is using.

The Essentials

It is not an HTML tag, but an instruction to the web browser.

It must be the first thing in your HTML document, before the <html> tag.

Modern websites use the HTML5 doctype: <!DOCTYPE html>.

It is case-insensitive, but lowercase or uppercase are most common.

It triggers 'Standards Mode' in modern browsers.

Without it, browsers may enter 'Quirks Mode' and render your page incorrectly.

Professional Insights

Standards Mode vs. Quirks Mode

Quirks Mode is a legacy behavior where browsers emulate old bugs to support ancient websites. Using the correct DOCTYPE ensures your page follows modern CSS rules.

Legacy DOCTYPs

Older versions of HTML (like HTML 4.01) had very long, complex doctypes with URLs. HTML5 simplified this to the shortest possible version.

Is it Mandatory?

While browsers will try to render a page without it, your CSS will often behave unexpectedly, especially with margins and heights.

Browser Compatibility

The simple <!DOCTYPE html> is supported by every modern browser and is forward-compatible with future versions of HTML.

Critical Pitfalls

Placing comments or spaces before the <!DOCTYPE html> declaration.

Forgetting to include it, leading to layout shifts and CSS bugs.

Confusing it with the <html> tag.

Using old, complex XHTML doctypes for new modern projects.

Interactive Lab

Sprint Tasks

Add the correct HTML5 declaration as the first line of the document

Add the root <html> tag below it

Loading editor...

Production Preview