HTML boilerplates templates
Starting documents you can copy into a new file and build on.
4 templates
Every project starts with the same handful of lines, and most of them are easy to get subtly wrong — a missing viewport tag, a charset declaration too far down the file, a doctype left off entirely. These are the versions worth copying.
Minimal HTML5 boilerplate
The shortest document that is still correct. Nine lines, nothing optional.
HTMLSEO-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.
HTMLWhat a boilerplate has to get right
Every project starts with the same dozen lines, and a surprising number of long-running bugs trace back to one of them being wrong from the first commit.
The doctype has to be first. Not after a comment, not after a blank line from your templating engine. Anything above it can push a browser into quirks mode, where the box model reverts to the 1990s version and your padding arithmetic silently stops adding up.
The charset declaration has to be within the first 1024 bytes. If the browser has to
guess the encoding and then discovers it guessed wrong, it throws away what it parsed and starts again.
That is why <meta charset> goes above the title rather than below it.
The viewport tag is what makes a page work on a phone. Without it, mobile browsers assume a 980-pixel desktop layout and zoom out to fit, which is why an otherwise responsive page can look like a distant photograph of a website.
Which one to start from
Take the minimal boilerplate for a scratch file, a test case or anything that will never be indexed. It is the shortest document that is still correct.
Take the SEO-ready boilerplate for anything public. It adds the canonical link, the robots directive, Open Graph and Twitter tags, structured data and a skip link — all the things that are tedious to retrofit across an existing site.
The email boilerplate is a different language wearing the same syntax. Tables, inline styles and conditional comments are not nostalgia there; they are the only things Outlook's Word rendering engine reliably understands.
Once you have a page, the HTML validator will tell you whether anything is unclosed, and the meta tag generator will build the head block from a form with a live preview of the search result.
Other categories
All of them are free
No attribution, no licence to read. Copy what you need.