Doctype
Definition
A doctype is a declaration, not an element: it carries no content and has no closing tag. In HTML5 it is exactly <!DOCTYPE html>, case-insensitive, and it must be the first thing in the file — before <html>, before any comment, before any blank line you can see. Older pages carry much longer versions naming an XHTML or HTML 4 document type definition, and those still work, but nothing new needs them. Its only job today is to pick a rendering mode. With it, the browser uses standards mode; without it, the browser assumes the page was written for a browser from the late 1990s and switches to quirks mode.
Why It Matters
Quirks mode is a real and unglamorous cause of "my layout looks wrong when nothing in my CSS is wrong". The biggest difference is the box model: in quirks mode a width of 300px includes padding and borders, so a box declared 300px wide with 20px of padding is still 300px on screen rather than 340px. Line height inside table cells, percentage heights and vertical alignment of images all shift too. The effect is a page that is subtly and unfixably off — every element a little too narrow or a little too tall — and no amount of tweaking individual rules puts it right while the mode is wrong.
How It Works
The browser looks at the first bytes of the response before it parses anything else. Find <!DOCTYPE html> and it sets document.compatMode to CSS1Compat, which is standards mode; find nothing, or something it does not recognise, and compatMode becomes BackCompat. There is also an almost-standards mode, triggered by a few legacy doctypes, which differs only in how images sit inside table cells. To check which mode a page is in, open developer tools, type document.compatMode in the console and read the answer. Anything before the declaration counts — a stray blank line is tolerated, but a comment, a byte order mark or an HTML fragment above it is enough to drop some browsers into quirks mode.
Real-World Example
A consultant exports a slide summary to HTML and publishes it at q3-review.99helpers.site, where every card comes out narrower than in the editor. The source starts with an HTML comment above the declaration, so the page is rendering in quirks mode and the padding is being swallowed by the declared width. Moving <!DOCTYPE html> to line one restores the intended spacing across all eight cards, with no CSS changed at all. Re-uploading the corrected file takes a few seconds and the previous version stays in version history.
Common Mistakes
- ✕Putting a comment, a blank template line or an editor byte order mark above the declaration — the doctype must be first, and anything before it can trigger quirks mode
- ✕Fighting the symptom by adjusting widths and paddings rule by rule — if the box model is wrong everywhere, the mode is the cause and the individual rules are fine
- ✕Copying a long XHTML 1.0 Transitional declaration from an old template — it works, but it invites confusion, and <!DOCTYPE html> is all any current browser needs
Related Terms
HTML Element
An HTML element is a single named piece of a page — a heading, a paragraph, an image — written as a start tag, its content and an end tag. Elements nest inside one another to form the structure the browser draws.
Head Section
The head section is the part of an HTML file between <head> and </head>. Nothing in it is drawn on the page; it holds the title, the character encoding, the viewport setting, stylesheet links, scripts and the meta tags search engines and social networks read.
Stylesheet
A stylesheet is the set of CSS rules that tells the browser how a page should look. It is usually a separate .css file linked from the head, though it can also sit in a style element inside the HTML itself.
HTML File
An HTML file is the source of a web page: nested elements that describe headings, paragraphs, links, images and forms. It is the one format a browser executes rather than merely displays — it fetches what the file references and runs the scripts it names.
index.html
index.html is the file a web server returns when a visitor asks for a folder rather than a named file. It is the default document for the site root and for every directory inside it.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →