HTML Boilerplate Generator
Build a clean HTML5 starter document with meta tags, a semantic layout, a CSS reset and optional Open Graph tags, then copy it or download index.html.
More options
Generated boilerplate
Built to the WHATWG HTML Living Standard: the short <!DOCTYPE html>, a
UTF-8 character encoding declaration inside the first 1024 bytes of the document, and a
non-empty <title> element in every page.
How it works
Type a page title, pick a language and tick the parts you want, and the generator writes a
complete HTML5 starter document live as you type: the doctype, the UTF-8 charset and
responsive viewport meta tags, an optional meta description, author, canonical link,
favicon and manifest links, a theme colour, Open Graph and Twitter Card tags, a small modern
CSS reset, a dark-mode media query, and a semantic body layout with a skip link,
<header>, <main> and <footer>.
Everything you type is HTML-escaped, so quotes and ampersands in a title can never break
the markup.
The output follows the WHATWG HTML Living Standard: the modern
<!DOCTYPE html> with no legacy string, the character encoding declaration
placed early enough that a browser sees it within the first 1024 bytes, and a non-empty
<title>, which the standard requires unless a higher-level protocol
supplies one. Choose 2 spaces, 4 spaces or tabs for the indentation, then copy the result or
download it as index.html. It all runs in your browser with plain JavaScript:
no sign-up, no ads, and nothing you type leaves your device.
Frequently asked questions
What is HTML boilerplate?
HTML boilerplate is the block of markup every page needs before you write any real content: the <!DOCTYPE html> declaration, the <html> element with a lang attribute, a <head> holding the UTF-8 charset and responsive viewport meta tags plus a <title>, and an empty <body>. Because it is identical on every project, people paste it from memory or from a snippet. This generator writes it for you and lets you add the parts you actually want, such as a meta description, canonical link, favicon links, Open Graph tags, a CSS reset and a semantic header/main/footer layout with a skip link.
Which HTML standard does this follow?
The WHATWG HTML Living Standard, the specification browsers actually implement. That means the short <!DOCTYPE html> with no legacy public identifier, a character encoding declaration that appears within the first 1024 bytes of the document (this generator puts <meta charset="UTF-8"> on the very first line of the head), and a non-empty <title> element, which the standard requires unless a higher-level protocol supplies the title. The viewport tag uses width=device-width, initial-scale=1 without maximum-scale, so pinch zoom keeps working and the page does not fail WCAG 1.4.4 Resize Text.
Can I choose tabs instead of spaces, and change the language?
Yes. The Indent control switches the whole document between 2 spaces, 4 spaces and tabs, and the Language select sets the lang attribute on the <html> element, with common BCP 47 tags such as en, en-GB, nl-BE, de, fr, es, ja, zh-Hans and ar. The lang attribute matters for screen reader pronunciation and for browser translation, so it is worth setting correctly. Everything regenerates instantly, then you can copy the result or download it as index.html.