A minimal HTML5 boilerplate needs a doctype, an html element with a lang attribute, a head holding the UTF-8 charset, the viewport meta tag, a title and a description, then a body. Link CSS with a link tag in the head and JavaScript with a deferred script tag. Generate yours below and download index.html.
| Line | Why |
|---|---|
| <!doctype html> | Turns on standards mode |
| <html lang="en"> | Language for screen readers and translation |
| <meta charset="utf-8"> | Correct characters and symbols |
| <meta name="viewport" ...> | Proper scaling on phones |
| <title> | Tab text and search result headline |
Updated
The generator writes a complete, valid index.html from a few toggles: page title and description, language, Open Graph tags for link previews, a favicon set, theme colour, preconnect hints and your stylesheet and script links with the loading attribute you choose. Every line it can produce is explained in the annotated template further down.
| Line | What it does | Required? |
|---|---|---|
| <!doctype html> | Tells the browser to use standards mode instead of quirks mode | Yes |
| <html lang="en"> | Declares the page language for assistive tech, hyphenation and translation | Yes |
| <meta charset="utf-8"> | Character encoding so accents, symbols and emoji display correctly | Yes |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | Stops phones rendering a zoomed-out desktop page | Yes |
| <title> | Browser tab, bookmarks and usually the search result headline | Yes |
| <meta name="description"> | Often used as the search snippet | Strongly recommended |
| <link rel="canonical"> | The preferred URL when the page is reachable at several | Recommended |
| <meta name="theme-color"> | Tints the browser toolbar on some mobile browsers | Optional |
| <link rel="icon"> and apple-touch-icon | Tab icon and home screen icon | Recommended |
| og: and twitter: meta tags | Title, text and image for shared link previews | Recommended |
| <link rel="preconnect"> | Opens a connection to another origin before it is needed | Optional |
| <link rel="stylesheet"> | Loads your CSS | If you have CSS |
| <script defer> | Loads JavaScript without blocking parsing, runs after it | If you have JS |
| <main> | Marks the main content for assistive tech | Recommended |
Everything a production page usually needs, nothing it does not. The table below explains each line.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Harbour Bakery | Sourdough in Halifax</title>
<meta name="description" content="Naturally leavened bread, baked daily on the waterfront.">
<link rel="canonical" href="https://example.com/">
<meta name="theme-color" content="#4F98FB">
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<meta property="og:title" content="Harbour Bakery">
<meta property="og:description" content="Naturally leavened bread, baked daily.">
<meta property="og:image" content="https://example.com/og.jpg">
<meta property="og:url" content="https://example.com/">
<meta name="twitter:card" content="summary_large_image">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="/css/styles.css">
<script src="/js/app.js" defer></script>
</head>
<body>
<main>
<h1>Harbour Bakery</h1>
</main>
</body>
</html>An external file is the norm because the browser caches it across pages. A style block suits page-specific rules; the style attribute suits one-off values.
<!-- 1. External stylesheet (best for most sites) -->
<link rel="stylesheet" href="css/styles.css">
<!-- 2. Style block in the head -->
<style>
h1 { color: #0f172a; }
</style>
<!-- 3. Inline style attribute -->
<p style="margin-top: 0">One-off tweak</p>
<!-- Print-only stylesheet -->
<link rel="stylesheet" href="css/print.css" media="print">Most broken stylesheets are a wrong path. Check the network panel in developer tools for a 404.
<!-- File next to index.html -->
<link rel="stylesheet" href="styles.css">
<!-- File in a subfolder -->
<link rel="stylesheet" href="css/styles.css">
<!-- One folder up -->
<link rel="stylesheet" href="../styles.css">
<!-- From the site root, works on every page -->
<link rel="stylesheet" href="/css/styles.css">| Markup | Blocks parsing? | Runs when | Order kept? |
|---|---|---|---|
| <script src="a.js"> | Yes | Immediately when reached | Yes |
| <script src="a.js" defer> | No | After parsing, before DOMContentLoaded | Yes |
| <script src="a.js" async> | No (pauses briefly to run) | As soon as it downloads | No |
| <script type="module" src="a.js"> | No | Like defer | Yes |
Modules get strict mode, their own scope and import support. nomodule lets you serve a fallback to very old browsers if you still need to.
<script src="/js/app.js" defer></script>
<script type="module" src="/js/main.js"></script>
<script async src="https://analytics.example.com/tag.js"></script>The head holds information about the page rather than content: character set, viewport, title, description, links to stylesheets, icons and social preview tags. Nothing in it is shown in the page body.
Order matters a little. Charset first, viewport next, then title and description. Put preconnect hints before the stylesheets that need them so the connection starts as early as possible.
When someone shares your URL in a messaging app or social network, the preview card comes from og:title, og:description, og:image and og:url. Without them, platforms guess, often badly.
An image of 1200 by 630 pixels works across the major networks. twitter:card set to summary_large_image asks X for the large version of the card.
Add <link rel="stylesheet" href="styles.css"> inside the head. The href is relative to the HTML file, so css/styles.css points into a css folder next to it. Stylesheets in the head block rendering briefly, which is intended: it prevents a flash of unstyled content.
In the head with defer, for example <script src="app.js" defer></script>. The browser fetches it in parallel with parsing and runs it once the document is parsed, in order. type="module" scripts are deferred automatically. Use async only for independent scripts such as analytics.
No. It only affected old versions of Internet Explorer, which is no longer supported by Microsoft. Current boilerplates leave it out.
A favicon.ico in the site root for old tools and crawlers, an SVG icon for modern browsers, and a 180 by 180 pixel apple-touch-icon PNG for iOS home screens covers nearly every case. A web app manifest adds larger icons if you want installability.
Both download without blocking the parser. defer waits until parsing finishes and keeps scripts in document order. async runs each script the moment it arrives, in any order, which can break scripts that depend on each other or on the DOM.
Related: Meta tag generator, HTML page generator, Favicon generator, HTML links, HTML and CSS cheat sheet.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.