HTML Boilerplate Generator
Start a web page from a correct foundation. Fill in the title and the files you plan to use, tick the extras you need, and get an index.html with everything a modern page should have in its head and nothing it should not.
- Runs in your browser
- No sign-up
- Free to use
How to use HTML Boilerplate Generator
- Choose a starting point: minimal, a standard page, or one prepared for sharing and search.
- Enter the page title, description, language and the paths of your style sheet and script.
- Tick optional parts such as Open Graph tags, a skip link or a small CSS reset.
- Copy the code or download it as index.html.
HTML Boilerplate Generator features
Correct essentials
Doctype, language attribute, UTF-8 charset and responsive viewport, in the right order.
Search and sharing tags
Meta description, canonical link, Open Graph and X/Twitter card tags, or noindex for private pages.
Modern script loading
Choose defer, an ES module, or a script at the end of the body.
Accessible skeleton
Optional header, main and footer landmarks and a skip link.
Small extras
Favicon link, theme colour, light and dark colour scheme and a three-line CSS reset.
Escaped input
Titles and descriptions are escaped so that quotes and angle brackets cannot break the markup.
When to use HTML Boilerplate Generator
- Starting a new static page or a small site.
- Creating a test page for a snippet of CSS or JavaScript.
- Teaching the structure of an HTML document.
- Checking an existing template against a known-good baseline.
HTML Boilerplate Generator FAQ
What does every HTML page need?
A doctype, an html element with a lang attribute, a head containing the character encoding, a viewport meta tag and a title, and a body. Everything else is optional. Without the doctype browsers fall back to an old compatibility mode, and without the viewport tag phones show the page zoomed out.
Why must the charset come first?
The browser needs to know the encoding before it reads any text, including the title. The specification requires the charset declaration within the first 1024 bytes of the document, so it is placed at the top of the head.
What is the difference between defer, module and a script at the end of body?
A script with defer downloads in parallel and runs after the document has been parsed, without blocking rendering; it is the usual choice. type="module" behaves like defer and additionally allows import and export. Placing the script at the end of the body is the older technique with a similar effect.
What are Open Graph tags for?
They control how a link to the page looks when it is shared in messaging apps and on social networks: the title, the description and the preview image. Without them, the platform guesses, often badly. The image should be an absolute address, ideally 1200 by 630 pixels.
Do I need the keywords meta tag?
No. Major search engines have ignored it for many years, which is why the generator does not include it. The title and the meta description are the tags that appear in search results.
What does the colour scheme option do?
It adds a meta tag telling the browser that the page supports both light and dark appearance. Default colours, form controls and scrollbars then follow the visitor's system setting even before your own CSS loads.
The parts of a modern HTML document
Every web page starts with the same dozen lines, and those lines matter more than their size suggests. The doctype switches the browser into standards mode. The lang attribute tells screen readers which pronunciation to use and helps translation tools and search engines. The charset declaration prevents garbled characters. The viewport tag makes the layout follow the width of the device. Getting any of these wrong produces problems that are confusing to trace back, which is the case for starting from a template.
The head then describes the page to the outside world. The title appears in the browser tab, in bookmarks and as the headline in search results. The meta description is the text search engines usually show beneath it. A canonical link names the preferred address when the same content is reachable under several. Open Graph tags do for social platforms and messaging apps what title and description do for search engines.
What the generator leaves out is deliberate. There are no conditional comments for browsers that no longer exist, no keywords tag, no X-UA-Compatible header, and no framework. Old boilerplates accumulated such lines for good reasons that have since expired. A starting template should contain what is needed today, so that every line can be explained.
The body skeleton uses landmark elements: header, main and footer. They cost nothing and give assistive technology a map of the page. The optional skip link lets keyboard users jump past navigation straight to the content, a small feature that accessibility guidelines expect on any page with repeated navigation.