HTML Cheat Sheet

Document Skeleton

<!DOCTYPE html>: First line of every page — turns on standards mode
<html lang="en">: Root element; lang helps screen readers, translation, and search
<meta charset="utf-8">: Character encoding — first thing inside <head>
<meta name="viewport" content="width=device-width, initial-scale=1">: Makes the page render at device width on phones
<title>Page title</title>: Shown in the browser tab and search results (required)
<link rel="stylesheet" href="styles.css">: Load a CSS file
<script src="app.js" defer></script>: Load JavaScript without blocking parsing

<h1>…</h1> … <h6>…</h6>: Headings — one h1 per page, don't skip levels
<p>…</p>: Paragraph
<strong>…</strong> / <em>…</em>: Strong importance / stress emphasis
<code>…</code> / <pre>…</pre> / <kbd>…</kbd>: Inline code / preformatted block / keyboard input
<blockquote cite="url">…</blockquote>: Block quotation (use <q> for inline quotes)
<time datetime="2026-03-14">March 14</time>: Machine-readable date or time
< > & "   ©: Character references for special characters

<a href="/about">About</a>: Link (root-relative URL)
<a href="#faq">FAQ</a>: Jump to the element with id="faq"
<a href="https://example.com" target="_blank" rel="noopener">: Open in a new tab safely
<img src="cat.jpg" alt="A cat asleep on a laptop" width="800" height="600">: Image — always alt; width/height prevent layout shift
<img srcset="s.jpg 480w, l.jpg 1200w" sizes="(min-width: 800px) 50vw, 100vw" src="l.jpg" alt="…">: Responsive image
<video src="clip.mp4" controls poster="p.jpg"></video>: Video with native controls
<img src="big.jpg" alt="…" loading="lazy">: Defer off-screen images

<ul><li>…</li></ul>: Unordered (bulleted) list
<ol start="3" reversed><li>…</li></ol>: Ordered list with options
<dl><dt>Term</dt><dd>Definition</dd></dl>: Description list
<table><caption>…</caption><thead>…</thead><tbody>…</tbody></table>: Table with caption and row groups
<th scope="col">Price</th>: Header cell for a column (scope="row" for rows)
<td colspan="2">…</td> / <td rowspan="3">…</td>: Cell spanning columns / rows

<header> / <footer>: Intro / closing content of the page or a section
<nav aria-label="Main">: Major navigation links
<main>: The unique main content — one visible per page
<article> / <section> / <aside>: Self-contained item / themed group with a heading / tangential content
<figure><img …><figcaption>…</figcaption></figure>: Captioned illustration
<div> / <span>: Generic block / inline container — only when nothing else fits

<form action="/signup" method="post">: Form that submits to /signup with POST
<label for="email">Email</label> <input id="email" name="email" type="email">: Labelled input (for matches id)
type="text|email|password|number|date|tel|url|search|checkbox|radio|file|range|color": Common input types
required minlength="8" max="10" pattern="[A-Z]{3}": Built-in validation attributes
<select name="size"><option value="m">Medium</option></select>: Dropdown
<fieldset><legend>Shipping</legend>…</fieldset>: Group related controls
<button type="submit">Send</button>: Submit button (type="button" for scripts)

alt="": Decorative image — screen readers skip it
aria-label="Close": Accessible name when there is no visible text
aria-describedby="hint": Link extra description (hints, errors)
aria-expanded="false" aria-controls="menu": State of a disclosure button
aria-live="polite": Announce content changes
<a class="skip-link" href="#main">Skip to content</a>: Skip link for keyboard users

<meta name="description" content="…">: Search result snippet candidate
<link rel="canonical" href="https://example.com/page">: Preferred URL for duplicate pages
<meta property="og:title" content="…">: Open Graph title for social previews
<script type="application/ld+json">…</script>: Structured data (schema.org)
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>: Fetch a critical resource early
<iframe src="…" title="…" sandbox loading="lazy"></iframe>: Embed with restrictions and lazy loading