HTML Boilerplate Generator
Generate a clean HTML5 starter template with your preferred settings.
Document
Assets
Options
Lines: 0Characters: 0DocType: HTML5
What's in an HTML5 boilerplate?
A modern HTML5 boilerplate starts with standard doctype and viewport settings.
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Starting a page with the meta tags and viewport declaration already correct.
- Producing a minimal document for a test or a reproduction case.
- Getting a starting point that includes charset and language attributes you would otherwise forget.
- Generating a scaffold with the options you want rather than deleting the ones you do not.
- Producing a template for a static page in a hurry.
Frequently Asked Questions
- What is genuinely required in a modern boilerplate?
- Very little: <!DOCTYPE html>, a lang attribute on <html>, <meta charset="utf-8"> as the first thing in <head>, the viewport meta, and a <title>. Everything else is situational.
- Why must charset come first?
- Because browsers only scan the first 1024 bytes for it. Declared later, the page may already have been parsed under a guessed encoding — which is why a stray mojibake character can appear before the declaration takes effect.
- Is the lang attribute important?
- Yes, more than it looks. Screen readers select pronunciation from it, and browsers use it for hyphenation and font selection. Omitting it makes a page announce English text with a French voice, or vice versa.
- Do I still need X-UA-Compatible or the shim scripts?
- No. X-UA-Compatible targeted Internet Explorer, which is retired, and html5shiv and Modernizr address browsers that no longer exist. Copying an old boilerplate is how they persist in new projects.
- What does the viewport meta actually do?
- Without it, mobile browsers render at ~980px wide and scale down, so a responsive layout never triggers its media queries. width=device-width, initial-scale=1 is what makes responsive CSS work at all.
- Where should scripts go?
- In the head with `defer`, which downloads in parallel and executes in order after parsing — better than a script at the end of the body, and far better than a blocking one in the head. Use `async` only when execution order does not matter.
- What belongs in the head for a social preview?
- `og:title`, `og:description`, `og:image` and `og:url`, plus `twitter:card`. Without them the platform guesses from the page, which is how a link preview ends up showing navigation text and no image.
Common errors and gotchas
- Omitting the viewport meta tag, which makes a responsive layout behave as if it were desktop-only.
- Leaving the language attribute unset, which affects screen readers and hyphenation.
- Declaring a charset late in the head, after content that already needed it.
- Keeping placeholder titles and descriptions, which then ship to production.
- Assuming a boilerplate makes the page accessible, which needs decisions the scaffold cannot make.
Related Generators tools
UUID Generator
Generate secure v4 UUIDs.
QR Code Generator
Create customizable QR codes and export as SVG or PNG.
Lorem Ipsum
Generate placeholder paragraphs, sentences, or word lists.
Random Hex Generator
Generate cryptographically random hexadecimal strings.
Random Number String
Generate a random string of digits of any length.
Random String Generator
Generate random strings from a custom character set.
Random Color Generator
Generate random colors as HEX, RGB, and HSL.
MAC Address Generator
Generate random MAC addresses in several formats.