HTML5 Reference

The HTML5 Cheat Sheet Every Web Developer Pins Above Their Desk

Every semantic element, form attribute, ARIA role and meta tag — organised by how you actually build pages. Stop second-guessing whether to use article or section, and write HTML that's accessible and SEO-ready from the start.

$9
One-time payment · Instant PDF download
📄 PDF format ⚡ Instant download 🖨️ Print-ready ♾️ Keep forever
html5-cheat-sheet.pdf
SEMANTIC HTML
<header>Page/section header
<main>Primary content
<article>Self-contained content
FORMS
<input type="email">Email input
<input required>Required field
<datalist>Autocomplete list
META & SEO
<meta name="desc">Page description
<meta og:title>Open Graph
<link rel="canonical">Canonical URL

What's inside the HTML5 Cheat Sheet

8 sections covering everything you need to write modern, semantic, accessible HTML — from document structure to ARIA roles.

🏗️

Document Structure & Metadata

The essential elements every HTML document needs to be valid and well-structured.

  • DOCTYPE and html lang attribute
  • head, title, meta charset
  • Viewport meta for mobile
  • Linking CSS, JS and favicons
🧱

Semantic Elements (all of them)

Use the right element every time — header, nav, main, section, article, aside and footer explained.

  • header, nav, main, footer
  • section, article, aside
  • figure, figcaption, details, summary
  • When to use div vs semantic elements
📝

Text, Lists & Tables

All the content elements with the correct attributes and accessibility considerations.

  • Headings hierarchy (h1–h6)
  • p, blockquote, cite, abbr, code
  • ol, ul, dl with their child elements
  • table, thead, tbody, th with scope
📋

Forms & Input Types

Every input type and form attribute — the reference for building accessible, user-friendly forms.

  • All input types (text, email, tel, date…)
  • Form attributes (required, pattern, min/max)
  • select, textarea, datalist, fieldset
  • label, button types
🖼️

Media (img/video/audio/canvas)

Embed and control media correctly with modern HTML5 attributes.

  • img with srcset and sizes
  • picture element for art direction
  • video and audio with controls/sources
  • canvas and svg basics
⚙️

HTML5 APIs & Data Attributes

Native browser capabilities and custom data attributes for JavaScript hooks.

  • data-* attribute pattern
  • Geolocation, localStorage, sessionStorage
  • Web Workers basics
  • drag and drop API attributes
🔍

Meta Tags for SEO & Social

All the meta tags search engines and social platforms actually read.

  • title, description, robots
  • Open Graph (og:title, og:image…)
  • Twitter card meta tags
  • canonical and hreflang

Accessibility & ARIA Roles

Write HTML that works for everyone — ARIA roles, labels and keyboard navigation patterns.

  • role attribute and landmark roles
  • aria-label, aria-describedby, aria-hidden
  • aria-expanded, aria-live, aria-required
  • tabindex and focus management

Who this cheat sheet is for

  • Developers learning semantic HTML and wondering when to use which element
  • Developers building SEO-optimised pages who need a complete meta tag reference
  • Web designers writing their own HTML who need a quick element reference
  • Developers who need the complete list of form input types and attributes
  • Anyone building accessible web applications who needs ARIA reference at hand

What you get

📄
PDF file
High-resolution, print-ready PDF. Works on any device.
Instant access
Download immediately after purchase via Gumroad.
🖨️
Print-optimised
Designed to look perfect on A4 or US Letter paper.
♾️
Yours forever
One payment. No subscription. Download again any time.
Instant Download
$9
One-time payment · PDF · No subscription

Get the HTML5 Cheat Sheet now

Write semantic, accessible HTML without second-guessing every element choice.

Buy on Gumroad →