Page structure
| Syntax | What it does | Lesson |
|---|
<!DOCTYPE html> | Tells the browser this is a modern HTML page | Structure |
<html lang="en"> | Wraps the whole page; lang sets the language | Structure |
<head> | Invisible info: title, meta tags, CSS links | Head & meta |
<title> | Text shown in the browser tab and search results | Head & meta |
<body> | Everything visible on the page | Structure |
<!-- note --> | A comment the browser ignores | Comments |
Links & images
| Syntax | What it does | Lesson |
|---|
<a href="url"> | Link to another page | Links |
target="_blank" | Open link in a new tab | Links |
href="#id" | Jump to an element on the same page | Links |
href="mailto:x@y.com" | Open an email app | Links |
<img src="" alt=""> | Image with a text alternative | Images |
width / height | Image size in pixels (prevents layout jumps) | Images |
loading="lazy" | Load image only when it's near the screen | Images |
<picture> / srcset | Different images for different screens | Responsive images |
Lists
| Syntax | What it does | Lesson |
|---|
<ul> | Bulleted (unordered) list | Lists |
<ol> | Numbered (ordered) list | Lists |
<li> | One list item | Lists |
<ol start="5"> | Start numbering at 5 | Lists |
<dl> <dt> <dd> | Description list (term + definition) | Lists |
Tables
| Syntax | What it does | Lesson |
|---|
<table> | A table of data | Tables |
<caption> | Table title | Tables |
<thead> <tbody> <tfoot> | Table sections | Tables |
<tr> | Table row | Tables |
<th> | Header cell | Tables |
<td> | Data cell | Tables |
colspan="2" / rowspan="2" | Cell spans several columns / rows | Tables |
Forms
| Syntax | What it does | Lesson |
|---|
<form action="" method="post"> | A form that sends data | Forms |
<label for="id"> | Text label linked to an input | Forms |
<input type="text"> | Single-line text box | Input types |
type="email" "password" "number" | Specialised inputs with built-in checks | Input types |
type="checkbox" / "radio" | Tick boxes / pick one option | Input types |
<textarea> | Multi-line text box | Forms |
<select> + <option> | Drop-down list | Forms |
<button type="submit"> | Button that sends the form | Forms |
required placeholder name | Common input attributes | Forms |
Layout & semantics
| Syntax | What it does | Lesson |
|---|
<div> | Generic block container | Div & span |
<span> | Generic inline container | Div & span |
class="x" / id="y" | Reusable label / unique name | Classes & IDs |
<header> <footer> | Top / bottom of a page or section | Semantic |
<nav> | Main navigation links | Semantic |
<main> | The main content (once per page) | Semantic |
<article> <section> <aside> | Self-contained post / themed group / side content | Semantic |
<details> + <summary> | Click-to-expand content | Interactive |
<dialog> | Pop-up dialog box | Interactive |
Media & embeds
| Syntax | What it does | Lesson |
|---|
<video src="" controls> | Video player | Audio & video |
<audio src="" controls> | Audio player | Audio & video |
<source> | Alternative media file formats | Audio & video |
<iframe src=""> | Embed another web page | Iframes |
< > & © | Entities for special characters | Entities |
Head & SEO
| Syntax | What it does | Lesson |
|---|
<meta charset="UTF-8"> | Character encoding (always include) | Head & meta |
<meta name="viewport" …> | Makes the page work on phones | Head & meta |
<meta name="description"> | Summary shown in search results | Head & meta |
<link rel="stylesheet" href=""> | Load a CSS file | Head & meta |
<link rel="icon" href=""> | Favicon for the browser tab | Head & meta |
<script src="" defer> | Load JavaScript after the HTML is read | Head & meta |
Text, quotes & code
| Syntax | What it does | Lesson |
|---|
<blockquote cite=""> <q> | Long and short quotations | Quotes & citations |
<cite> <abbr title=""> <address> | Work titles, abbreviations, contact details | Quotes & citations |
<pre><code> | Multi-line code block | Code elements |
<kbd> <samp> <var> | Keys, program output, variables | Code elements |
style="color: navy;" | Inline colour and styles | Colors & styles |
<figure> + <figcaption> | Captioned image, chart or code | Figure & time |
<time datetime="2026-03-14"> <mark> | Machine-readable date, highlighted text | Figure & time |
<progress value="" max=""> <meter> | Task progress, measurement gauge | Figure & time |
Paths, buttons & forms
| Syntax | What it does | Lesson |
|---|
href="../index.html" href="/about" | Relative and root-relative paths | File paths |
<button type="button"> | Button that runs JavaScript | Buttons |
<select> <option> <textarea> | Dropdowns and multi-line text | Form controls |
<fieldset> + <legend> | Group related controls | Form controls |
<input list="id"> + <datalist> | Typing suggestions | Form controls |
required minlength pattern min max | Built-in validation | Form validation |
data-id="7" + el.dataset.id | Custom data for CSS and JavaScript | Data attributes |
Graphics, scripts & APIs
| Syntax | What it does | Lesson |
|---|
<canvas> + getContext('2d') | Draw with JavaScript | Canvas |
<svg viewBox="0 0 24 24"> | Scalable vector graphics | SVG |
<script src="" defer> type="module" | Load scripts without blocking | Scripts |
youtube-nocookie.com/embed/ID | Privacy-friendly video embed | Embedding |
popover + popovertarget | Pop-ups without JavaScript | HTML5 APIs |
draggable="true" contenteditable | Drag and drop, editable text | HTML5 APIs |
SEO, speed & responsive
| Syntax | What it does | Lesson |
|---|
<link rel="canonical" href=""> | Main URL for search engines | SEO meta |
<meta property="og:image"> | Social sharing preview | SEO meta |
<script type="application/ld+json"> | Structured data | SEO meta |
loading="lazy" fetchpriority="high" | Lazy-load or prioritise images | Page speed |
<link rel="preload"> rel="preconnect" | Resource hints | Page speed |
width=device-width, initial-scale=1 | Viewport for phones | Responsive design |
<div style="overflow-x: auto"> | Scrollable wide tables | Responsive design |
The HTML lessons behind this cheat sheet