HTML5 Boilerplate Generator

Generates a starting HTML document with the head tags a page actually needs — charset, viewport, title, description and the Open Graph set — rather than the bare skeleton an editor inserts.

Live demo · real result from this tool

Press Generate to create a result.

Processed on your device — nothing is uploaded.

How to use HTML5 Boilerplate Generator

  1. Enter your page title and description.
  2. Generate the document and copy it.
  3. Set the lang attribute to your page’s actual language.
  4. charset must be within the first 1024 bytes of the document.
  5. Without a viewport tag, mobile browsers render at 980px and scale down.
  6. The lang attribute is a WCAG requirement, not an optional extra.

The two tags that must come first

charset must appear within the first 1024 bytes, or the browser may start parsing with the wrong encoding and re-parse when it finds out — which is why it is the first thing in the head. The viewport tag is what makes a page respond to phone widths at all: without it mobile browsers render at a virtual 980px and scale down, so a perfectly responsive stylesheet produces a tiny, zoomed-out page. Those two omissions account for most “my site looks wrong on mobile” reports.

What belongs in the head and what does not

Title, description, canonical, viewport, charset and the Open Graph tags earn their place. The keywords meta tag has been ignored since 2009. A long block of render-blocking scripts does not belong there either — defer them, or move them before the closing body tag, because anything blocking in the head delays the first paint of the entire page.

lang is an accessibility requirement, not a formality

The lang attribute on the html element tells a screen reader which pronunciation rules to use. Without it, English text may be read with the wrong phonetics, which for a blind user ranges from irritating to incomprehensible. It is one attribute, it is required by WCAG, and it is missing from a remarkable number of production sites.

Frequently asked questions

What is an HTML boilerplate?
A boilerplate is the minimal, correct starting structure every HTML5 page needs: the doctype, html/head/body tags, charset, viewport and title. This tool builds that skeleton plus optional SEO and social tags.
What does the CSS reset do?
The optional reset applies sensible defaults, box-sizing: border-box, removes default margins, sets a base line-height, and makes images block-level and responsive, so your styling starts from a predictable baseline across browsers.
Why include Open Graph and Twitter tags?
Open Graph and Twitter Card meta tags control how your page looks when shared on social media, defining the title, description and preview image. They are optional here and only added when you enable them.
What does the viewport meta tag do?
It tells mobile browsers to render at the device's actual width rather than a virtual 980px. Without it, a responsive stylesheet has nothing to respond to and the page appears zoomed out.
Do I still need the charset declaration?
Yes, and it must come first. HTML5 defaults to UTF-8, but declaring it explicitly within the first 1024 bytes avoids a re-parse and any ambiguity about encoding.
What should not go in the head?
Render-blocking scripts. Anything synchronous there delays the first paint of the whole page — use defer, or move scripts before the closing body tag.

How do we know nothing is uploaded? Test it yourself on the privacy proof page.

Written by the ToolsRift team · Last updated

Pages are drafted with AI assistance and checked by automated tests. How we write and check pages.

Was this tool useful?

Report a problem

Related tools

Start typing to search every tool.

↑ ↓ to moveEnter to openEsc to close