Generator Tools

HTML Boilerplate Generator

Generate a clean HTML5 boilerplate with meta tags, Open Graph, Twitter Card, favicon, manifest, JSON-LD, and CSS reset. Copy or download instantly.

Quick presets

One click seeds every field for a common starting point. Fine-tune below.

Your HTML

51 lines · 2,058 bytes

<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="color-scheme" content="light dark" />
  <meta name="theme-color" content="#0b0d12" />
  <title>My Page Title</title>
  <meta name="description" content="A short, useful summary of the page in around 150 characters." />
  <meta name="robots" content="index, follow" />
  <link rel="canonical" href="https://example.com/page" />
  <link rel="icon" href="/favicon.ico" />

  <!-- Open Graph -->
  <meta property="og:type" content="website" />
  <meta property="og:title" content="My Page Title" />
  <meta property="og:description" content="A short, useful summary of the page in around 150 characters." />
  <meta property="og:url" content="https://example.com/page" />
  <meta property="og:site_name" content="Example" />
  <meta property="og:image" content="https://example.com/og.png" />

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="My Page Title" />
  <meta name="twitter:description" content="A short, useful summary of the page in around 150 characters." />
  <meta name="twitter:image" content="https://example.com/og.png" />
  <meta name="twitter:site" content="@example" />

  <style>
    *, *::before, *::after { box-sizing: border-box; }
    * { margin: 0; }
    html, body { height: 100%; }
    body { line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
    img, picture, video, canvas, svg { display: block; max-width: 100%; }
    input, button, textarea, select { font: inherit; }
    p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
    body {
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      color: #0f172a;
      background: #ffffff;
    }
  </style>
</head>
<body>
  <main>
    <h1>My Page Title</h1>
    <p>A short, useful summary of the page in around 150 characters.</p>
  </main>
</body>
</html>

Output updates live as you change any field. Nothing is uploaded.

How to use

Pick a quick preset (Bare HTML5, SEO ready, PWA ready, Tailwind CDN landing, or Static article) to seed every field for a common starting point, or start from defaults.
Fill in the page basics (title, description, language, optional author and keywords) and the SEO and social fields (canonical URL, robots meta, Open Graph, Twitter Card, optional JSON-LD).
Set the icons and theme (favicon, Apple touch icon, manifest, theme color, color scheme) and pick a CSS reset and JavaScript setup that match your project.
Choose a starter body template (empty, hello world, article, or landing) and an indentation style (2 spaces, 4 spaces, or tab).
Click Copy HTML to copy the document, or Download index.html to save it straight into your new project folder.

About this tool

HTML Boilerplate Generator builds a clean, valid HTML5 starter document in the browser using only the inputs you tick. The output is one well-indented index.html file that you can copy or download into a new project without removing anything you do not need. Fields cover the page basics (title, meta description, author, keywords, lang, dir), SEO and social (canonical URL, robots meta, Open Graph, Twitter Card, social image, site name, Twitter handle), icons and theme (favicon link, Apple touch icon, web app manifest, theme color, color-scheme), styles (no reset, a compact inline modern reset, Normalize.css from a CDN, or an external stylesheet link), an optional system-font body style, JavaScript setup (no script, an inline module script, or an external classic or module script with defer), and a starter body template (empty, hello world, article scaffold, or a landing page with hero and sections). Five quick presets seed sensible combinations in one click: Bare HTML5 for the smallest valid document, SEO ready for a marketing page with Open Graph and a JSON-LD WebPage block, PWA ready for an installable app with theme color, manifest, and Apple touch icon, Tailwind CDN landing for a quick prototype using the Tailwind Play CDN, and Static article for a long-form post with JSON-LD Article schema. Indentation can be 2 spaces, 4 spaces, or a tab. Every change re-renders the file instantly with live line and byte counts, and the result downloads as index.html for drop-in use in a fresh repo or static host. Everything runs locally in your browser, so your inputs never leave your device.

Free to use. Works in your browser. No signup, no login.

Related tools

HTML Boilerplate Generator

Page basics

SEO and social

Icons and theme

Styles and scripts

Body content

Your HTML

How to use

About this tool

You may also like

Meta Tag Preview

Open Graph Tag Generator

Canonical Tag Generator

Favicon Generator

Web App Manifest Generator

Schema Markup Generator