Fill in your page details, tick the features you want, and get a modern, valid HTML5 starter file with a live preview. Download it as index.html or as a ZIP with separate CSS and JavaScript files.
Last updated:
Advertisement
Advertisement
How to use the HTML Boilerplate Generator
Enter the basics: page title, description, language and, if you have them, the site URL and author.
Tick the features you need: SEO and social tags, favicons, CSS reset, layout, dark mode, analytics.
Choose inline or external CSS and JavaScript.
Check the live preview and the generated code.
Copy the HTML or download index.html (or the ZIP with styles.css and script.js).
What goes in a modern HTML5 head
Tag
Why it matters
<!DOCTYPE html>
Puts the browser in standards mode instead of quirks mode.
<html lang="en">
Tells screen readers, translators and search engines the page language.
<meta charset="utf-8">
Must be in the first 1024 bytes so every character displays correctly.
<meta name="viewport">
Makes the layout use the device width on phones.
<title>
Shown in tabs, bookmarks and as the headline in search results; aim for 50-60 characters.
<meta name="description">
Often used as the search snippet; aim for about 140-160 characters.
<link rel="canonical">
Names the preferred URL when the same page is reachable at several addresses.
og:* and twitter:*
Control the title, text and image of link previews in social apps and messengers.
theme-color
Colors the browser toolbar on mobile and installed web apps.
The template defines its colors as CSS custom properties and switches them inside @media (prefers-color-scheme: dark), so the page follows the visitor's system setting. color-scheme: light dark makes form controls and scrollbars match. With the toggle button, the visitor's choice is stored in localStorage and applied by a tiny inline script in the head before the page paints, which avoids a flash of the wrong theme.
Frequently asked questions
What is an HTML boilerplate?
A boilerplate is the minimal starting code every web page needs: the doctype, the html element with a language, a head with charset, viewport and title, and a body. Starting from a good boilerplate avoids missing tags that affect rendering, mobile layout and SEO.
Why must the charset meta tag come first?
The browser needs to know the character encoding before it reads any text. The HTML standard requires <meta charset="utf-8"> to appear within the first 1024 bytes of the document, so it is placed right at the top of the head.
What does the viewport meta tag do?
width=device-width, initial-scale=1 tells mobile browsers to use the real screen width instead of a zoomed-out 980px desktop layout. Without it, responsive CSS and media queries do not work as expected on phones.
Do I need Open Graph tags?
They are optional but recommended for any page that may be shared. og:title, og:description, og:image and og:url control the title, text and preview image shown on Facebook, LinkedIn, Slack, WhatsApp and many other apps.
Which favicon files do I need today?
A favicon.ico in the site root for old browsers and tools, an SVG icon for modern browsers, a 180×180 apple-touch-icon.png for iOS home screens, and a web app manifest with 192 and 512px icons for Android and installable web apps.
Should scripts go in the head or at the end of the body?
Put them in the head with the defer attribute. Deferred scripts download in parallel without blocking rendering and run in order after the document is parsed, which is as fast as placing them at the end of the body.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.