HTML cheat sheet
A scannable HTML reference: 30 short snippets across 13 topics, each linking back to the lesson it came from.
At a glance
| Topic | What it covers | |
|---|---|---|
| HTML: getting started | HTML is a markup language: it describes the structure and meaning of content. It is not a programming language — there | lesson |
| Elements and attributes | An element is usually an opening tag, content, and a closing tag. Everything between the tags is its children | lesson |
| Headings, paragraphs and text | There are six heading levels, <h1> through <h6>. Think of them as a document outline, not as font sizes | lesson |
| Links and images | target="_blank" opens a new tab. Always pair it with rel="noopener" in older code — modern browsers imply it, but the | lesson |
| Forms and inputs | HTML validation attributes (required, minlength, pattern, min/max) improve UX by catching mistakes instantly. They are | lesson |
| Semantic layout | Landmark elements describe roles: navigation, main content, complementary aside. Screen readers offer shortcuts to jump | lesson |
| Media and embedding | SVG is markup, so it scales to any resolution and can be styled with CSS. Inline SVG costs no extra request; external | lesson |
| The document head: metadata, favicons and social cards | Nothing inside <head> paints on the page, yet almost all of it changes how the page is indexed, shared and | lesson |
| Accessibility foundations in markup | Assistive technology does not see your class names or your CSS. It sees a tree of roles, names and states, built from | lesson |
| Interactive elements without JavaScript | A disclosure hides content until it is asked for. Browsers have shipped one natively for years, and because it is an | lesson |
| Responsive and performant images in practice | One image file cannot serve both a 360px phone and a 4K monitor well: it is either blurry or wasteful. srcset offers | lesson |
| Inline SVG and icon markup | Inline SVG is markup in your document: it inherits CSS, scales without blurring, and needs no extra request. The | lesson |
| HTML validation, templating and frameworks | A validator parses your document the way a browser does and reports where it had to guess. Since the parser silently | lesson |
Quick snippets
HTML: getting started
The smallest valid document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My first page</title>
</head>
<body>
<h1>Hello, world</h1>
<p>This is a paragraph.</p>
</body>
</html>Full lesson: HTML: getting started →
Elements and attributes
Anatomy of an element
<p class="intro">Learn <strong>HTML</strong> step by step.</p>
<!-- tag: p attributes: class="intro" content: text + <strong> -->Nesting rules
<!-- correct -->
<p>Learn <em>HTML <strong>now</strong></em></p>
<!-- wrong: tags overlap -->
<p>Learn <em>HTML <strong>now</em></strong></p>Full lesson: Elements and attributes →
Headings, paragraphs and text
Paragraphs and inline meaning
<h2>Getting started</h2>
<p>HTML describes <strong>structure</strong>, and CSS <em>appearance</em>.</p>
<p>Some terms need care: <code><div></code> has no meaning,
while <abbr title="HyperText Markup Language">HTML</abbr> does.</p>Full lesson: Headings, paragraphs and text →
Links and images
Anchors
<a href="https://example.com/docs">Read the docs</a>
<a href="/learn/html/">Same site, root-relative</a>
<a href="#section-2">Jump within the page</a>
<a href="mailto:[email protected]">Email us</a>
<a href="tel:+15551234567">Call us</a>Opening in a new tab (carefully)
<a href="https://external.example" target="_blank" rel="noopener noreferrer">External article</a>Images
<img src="/img/diagram.svg" alt="Request flowing from browser to server and back" width="800" height="450" loading="lazy">Full lesson: Links and images →
Forms and inputs
A form in full
<form action="/subscribe" method="post">
<label for="email">Email address</label>
<input id="email" name="email" type="email" required autocomplete="email">
<label for="plan">Plan</label>
<select id="plan" name="plan">
<option value="free">Free</option>
<option value="pro">Pro</option>
</select>
<button type="submit">Subscribe</button>
</form>Input types earn you free behavior
<textarea name="bio" rows="4" minlength="10" maxlength="280"></textarea>
<input type="checkbox" id="terms" name="terms" required>
<label for="terms">I accept the terms</label>
<input type="text" name="country" autocomplete="country-name">Full lesson: Forms and inputs →
Semantic layout
The page skeleton
<header>
<nav aria-label="Primary">…links…</nav>
</header>
<main>
<article>
<h1>Article title</h1>
<p>Body copy…</p>
</article>
<aside>Related links</aside>
</main>
<footer>© 2026</footer>Full lesson: Semantic layout →
Media and embedding
Video and audio
<video controls width="640" poster="/img/preview.jpg">
<source src="/media/clip.webm" type="video/webm">
<source src="/media/clip.mp4" type="video/mp4">
<track kind="captions" src="/media/clip.en.vtt" srclang="en" label="English" default>
Your browser does not support embedded video.
</video>
<audio controls src="/media/podcast.mp3"></audio>Embedding other documents
<iframe src="https://example.com/widget" title="Live price widget" width="400" height="300" loading="lazy" sandbox="allow-scripts allow-same-origin" referrerpolicy="no-referrer"></iframe>Inline SVG
<svg viewBox="0 0 24 24" width="24" height="24" role="img" aria-label="Settings">
<circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"/>
</svg>Full lesson: Media and embedding →
The document head: metadata, favicons and social cards
Metadata the browser always needs
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Debugging CSS with DevTools — CodeLore</title>
<meta name="description" content="A repeatable method for finding broken layout in the browser, from computed styles to overflow hunting.">
<link rel="canonical" href="https://example.com/learn/css-debugging/">
<meta name="robots" content="index, follow">
</head>Favicons and app icons
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-32.png" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0f172a">Social cards and structured data
<meta property="og:type" content="article">
<meta property="og:title" content="Debugging CSS with DevTools">
<meta property="og:description" content="Find broken layout in minutes instead of guessing.">
<meta property="og:image" content="https://example.com/img/css-debug-cover.png">
<meta property="og:url" content="https://example.com/learn/css-debugging/">
<meta name="twitter:card" content="summary_large_image">Full lesson: The document head: metadata, favicons and social cards →
Accessibility foundations in markup
Native elements before ARIA
<!-- no role, no keyboard support, announced as plain text -->
<div class="btn" onclick="saveDraft()">Save draft</div>
<!-- role, name, focus and keyboard activation come for free -->
<button type="button" class="btn">Save draft</button>Every control needs a name
<label for="search">Search courses</label>
<input id="search" type="search" name="q">
<button type="button" aria-label="Close dialog">
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M6 6l12 12M18 6L6 18"/>
</svg>
</button>Landmarks, live regions and focus order
<a class="skip-link" href="#content">Skip to content</a>
<main id="content">
<h1>Your courses</h1>
</main>
<p role="status" aria-live="polite">Cart updated: 3 items</p>Full lesson: Accessibility foundations in markup →
Interactive elements without JavaScript
Disclosure with details and summary
<details>
<summary>What counts as a defect?</summary>
<p>Anything that breaks the stated specification, including gaps in the documentation.</p>
</details>
<details open>
<summary>Shipping and returns</summary>
<p>Orders leave the warehouse within one working day.</p>
</details>Template and slot
<template id="row">
<tr><td class="name"></td><td class="email"></td></tr>
</template>
<user-badge>
<span slot="label">Beta</span>
</user-badge>Full lesson: Interactive elements without JavaScript →
Responsive and performant images in practice
srcset and sizes
<img
src="/img/hero-800.jpg"
srcset="/img/hero-400.jpg 400w,
/img/hero-800.jpg 800w,
/img/hero-1600.jpg 1600w"
sizes="(min-width: 900px) 800px, 100vw"
alt="Team reviewing a wireframe on a whiteboard"
width="800" height="450">Art direction with picture
<picture>
<source type="image/avif" srcset="/img/hero.avif 1x, /img/[email protected] 2x">
<source type="image/webp" srcset="/img/hero.webp 1x, /img/[email protected] 2x">
<img src="/img/hero.jpg" alt="Sunlit meeting room" width="800" height="500">
</picture>
<picture>
<source media="(min-width: 900px)" srcset="/img/portrait-wide.jpg">
<img src="/img/portrait-square.jpg" alt="Portrait of the author" width="400" height="400">
</picture>Loading hints and layout shift
<img src="/img/article-1.jpg" alt="A laptop on a cluttered desk"
width="1200" height="675" loading="lazy" decoding="async">
<img src="/img/hero.jpg" alt="Gradient banner behind the product name"
width="1600" height="900" fetchpriority="high" decoding="async">Full lesson: Responsive and performant images in practice →
Inline SVG and icon markup
Coordinates and viewBox
<svg viewBox="0 0 24 24" width="24" height="24"
fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round">
<path d="M4 12h16M12 4v16"/>
</svg>currentColor and sprite symbols
<svg style="display:none" aria-hidden="true">
<symbol id="icon-search" viewBox="0 0 24 24">
<circle cx="11" cy="11" r="7"/>
<path d="M16 16l4 4"/>
</symbol>
</svg>
<button type="button" class="toolbar-btn">
<svg width="20" height="20"><use href="#icon-search"></use></svg>
Search
</button>Naming and hiding icons
<button type="button" aria-label="Close">
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M6 6l12 12M18 6L6 18"/>
</svg>
</button>
<svg viewBox="0 0 24 24" role="img" aria-label="Warning">
<path d="M12 3l9 16H3z"/>
</svg>Full lesson: Inline SVG and icon markup →
HTML validation, templating and frameworks
Validating the document
<!-- invalid: a block element cannot live inside a paragraph -->
<p>Read the <div>setup guide</div> first.</p>
<!-- valid: the parser keeps the structure you intended -->
<p>Read the <a href="/guides/setup/">setup guide</a> first.</p>How template languages map to the DOM
// template source
<ul>{items.map(item => <li key={item.id}>{item.name}</li>)}</ul>
// rendered DOM
<ul><li>Widget</li><li>Gadget</li></ul>Escaping and hydration
// server renders 12:00:04, client renders 12:00:05 — mismatch
<p>{new Date().toLocaleTimeString()}</p>
// stable markup first, live value after mount
const [now, setNow] = useState(null);
useEffect(() => setNow(new Date()), []);Full lesson: HTML validation, templating and frameworks →
FAQ
Is this HTML cheat sheet free to use?
Yes. No sign-up and no tracking: the page is static, every example is on the page itself, and you can print it or save it as a one-page reference.
Where do the examples come from?
Every snippet is taken from the 13 lessons of the HTML course on this site, and each section links back to the lesson it was pulled from.
How do I go deeper than a cheat sheet?
Open the full HTML course — it carries the worked explanations, the edge cases and the exercises behind every line here.
Related cheat sheets
CSS JavaScript TypeScript HTML DOM AJAX JSON
Last refreshed 2026-09-27.