Cheat Sheets

HTML Boilerplate Cheat Sheet: Doctype, Head, Viewport & Starter Markup

By ArpaNeuro Team September 9, 2026
HTML boilerplate cheat sheet

An HTML boilerplate is the minimum valid document you duplicate for every new page. In 2026 that is <!DOCTYPE html>, lang, UTF-8 charset, viewport, a unique title, and landmark regions. Skip old resets that pull in unused libraries.

This HTML cheat sheet is written for people searching for a fast, accurate reference: students, junior developers, and teams shipping production software. Pin it, copy the snippets, and come back when syntax slips.

Quick reference

  • Doctype: First line: <!DOCTYPE html>.
  • Lang: html lang="en" (or the real language). Affects AT, hyphenation, and translation.
  • Charset: First in head so the parser does not guess.
  • Viewport: Without it, CSS pixels do not match the phone width.
  • Title: Required, unique, human-readable. Not “Untitled” or the company name alone.
  • CSS: One stylesheet in head. Avoid @import chains that block render.
  • JS: Put scripts with defer or at the end of body. type="module" is deferred by default.
  • Favicon: <link rel="icon" href="/favicon.ico"> plus an SVG icon if you have one.

Copy-paste examples

Starter document

Duplicate this, then change title and main heading per page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page title</title>
  <link rel="stylesheet" href="/assets/app.css">
  <script src="/assets/app.js" defer></script>
</head>
<body>
  <header><a href="/">Home</a></header>
  <main>
    <h1>Page title</h1>
  </main>
  <footer></footer>
</body>
</html>

Common mistakes

  • Copying a 2012 boilerplate with jQuery, Modernizr, and IE conditionals you do not need.
  • Missing lang so screen readers guess the wrong voice.
  • Inline scripts in head without defer that block first paint.
  • Same <title> on every view in a PHP app.

FAQ

  1. Do I need an HTML5 shiv? Not for current evergreen browsers. Drop IE8-era polyfills unless you still have a documented IE requirement.
  1. Where does the CSS reset go? At the top of your stylesheet, not as a second blocking file if you can avoid it.
  1. Is a boilerplate the same as a framework? No. A boilerplate is markup. Frameworks add CSS/JS conventions on top.

Related HTML cheat sheets

Build with this stack

When a cheat sheet is not enough — you need a production app, a student FYP, or a custom dashboard — ArpaNeuro builds custom web development and also sells ready-made source code. Request a quote and tell us the stack.

Browse software development services or the source code marketplace if you want a working codebase instead of starting from a blank file.

← All Articles Get a Quote →