Minimal HTML5 boilerplate
The shortest document that is still correct. Nine lines, nothing optional.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page title</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<h1>Page title</h1>
<p>Content goes here.</p>
<script src="/app.js" defer></script>
</body>
</html>How it works
Nothing here is decoration. Remove any one line and something breaks.
The doctype switches the browser into standards mode. Leave it off and you get quirks mode, where the box model reverts to the 1990s version and your padding calculations stop working. It must be the very first thing in the file — even a blank line above it causes problems in older browsers.
The lang attribute tells screen readers which pronunciation rules to use. A page in the wrong voice is close to unusable for someone relying on audio, and it is one attribute.
The charset declaration must appear within the first 1024 bytes of the document. If the browser has to guess the encoding, it stops and restarts parsing when it finds out it guessed wrong. Put it first in the head, before the title.
The viewport meta tag is what makes the page behave on a phone. Without it, mobile browsers assume you designed for a 980-pixel desktop and zoom out to fit, which is why an unstyled page on mobile looks like a distant photograph of a website.
defer on the script means the browser downloads it in parallel with parsing the HTML and runs it once the document is ready. Without it the parser stops dead while the script downloads and executes. There is almost no reason to omit it.
Making it yours
If the page will be indexed, add a meta description and a canonical link. The meta tag generator builds the full block including Open Graph and Twitter tags.
If you are adding a favicon, <link rel="icon" href="/favicon.ico" sizes="32x32"> plus an SVG version covers everything currently in use.
Related templates
SEO-ready HTML boilerplate
A full head block with meta, Open Graph, Twitter cards and structured data.
HTMLCSSSingle-file landing page
A complete landing page in one file — hero, features, call to action.
HTMLCSSHTML email boilerplate
A table-based email shell that survives Outlook and Gmail.
HTMLCheck your version
Once you have edited this, the HTML validator will catch any tag you left unclosed, and the formatter will tidy the indentation. Both run in your browser.