What does an HTML5 boilerplate include?

A solid boilerplate sets the doctype and language, declares the UTF-8 charset and a responsive viewport, and provides a title, meta description, and canonical link. Many also include Open Graph and Twitter card tags for social sharing and favicon links.

Why is the charset meta tag first?

The browser must know the character encoding before it parses text, so the charset meta tag should appear within the first 1024 bytes of the document — placing it right after the opening head tag guarantees that.

What is the viewport meta tag for?

It controls how the page scales on mobile devices. Setting width to device-width and initial-scale to 1 makes the layout adapt to the screen instead of rendering a zoomed-out desktop view.

What is a canonical URL?

The canonical link tells search engines which URL is the authoritative version of a page when the same content is reachable from several addresses. It consolidates ranking signals and prevents duplicate-content issues.

Is my input sent anywhere?

No. The builder assembles the HTML entirely in your browser from the values you enter. Nothing is uploaded, so you can scaffold pages for private projects safely.

What is the HTML5 Boilerplate Builder?

Creates a clean HTML5 document boilerplate with charset, viewport, title, meta description, Open Graph tags, Twitter card, canonical URL, favicon links, and body structure, generated from a short form. Copy and start coding. It runs free in your browser on Gera Tools, with nothing uploaded.

HTML5 Boilerplate Builder

Name: HTML5 Boilerplate Builder
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

The HTML5 Boilerplate Builder gives you a clean, correct starting document instead of copying a half-remembered template. A good boilerplate gets the small details right — charset first, a responsive viewport, a canonical link, and social tags — so the page renders and shares correctly from line one. This tool turns a short form into a complete HTML5 file ready to start coding in.

What gets generated

Tag / block	What it does
`<!doctype html>`	Triggers standards mode in every browser
`<html lang="en">`	Language for screen readers and crawlers; change to your locale
`<meta charset="utf-8">`	Must be first; ensures encoding is known before parsing
`<meta name="viewport">`	Makes the layout responsive on mobile
`<title>`	Browser tab and search result headline
`<meta name="description">`	Search snippet text (aim for under 160 characters)
`<link rel="canonical">`	Tells search engines which URL is authoritative
Open Graph block	Controls how the page appears when shared on social media
Twitter card	Controls the card type and image in Twitter/X
`<link rel="icon">`	Browser tab favicon

How it works

The builder assembles a document in the order browsers and crawlers expect. It opens with <!doctype html> and an <html lang="…"> element, then a <head> whose first child is the <meta charset="utf-8"> tag (so encoding is known before parsing), followed by the responsive viewport tag, the title, the meta description, and a canonical link. Optional blocks — Open Graph (og:title, og:description, og:image, og:url, og:type), a Twitter summary card, and a basic favicon link — are included only when you toggle them on. It closes with a minimal <body> containing a single <h1>. All user-entered text is HTML-escaped so a stray quote or angle bracket cannot break the markup.

Why each head element’s position matters

The <meta charset> tag must appear within the first 1024 bytes of the document — before any text content that could contain non-ASCII characters. Placing it after the title (which might contain accented characters) can cause the browser to misinterpret encoding on the first pass.

The viewport meta tag should come before any other layout-affecting tags. Without it, mobile browsers render the page at a virtual desktop width (typically 980px) and zoom out, making text unreadably small on narrow screens. width=device-width, initial-scale=1 is the correct baseline for responsive design.

Worked example

Filling in title: Acme — Transactional Email, description: Reliable email delivery for developers, canonical: https://acme.example/, Open Graph enabled, produces:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Acme — Transactional Email</title>
  <meta name="description" content="Reliable email delivery for developers">
  <link rel="canonical" href="https://acme.example/">
  <meta property="og:title" content="Acme — Transactional Email">
  <meta property="og:description" content="Reliable email delivery for developers">
  <meta property="og:url" content="https://acme.example/">
  <meta property="og:type" content="website">
</head>
<body>
  <h1>Acme — Transactional Email</h1>
</body>
</html>

Tips

Always set the canonical. Even on a one-page site, a self-referencing canonical prevents duplicate-content surprises from query strings and trailing slashes.
Use an absolute og:image URL. Social scrapers cannot resolve relative paths; the Open Graph image must be a full https:// URL, ideally 1200×630 px.
Keep the description under ~160 characters. Search engines truncate longer descriptions in their snippets, so lead with the key message.
Set lang accurately. The HTML lang attribute is used by screen readers to select the correct text-to-speech pronunciation and by browser translation tools.