742 commands · 48 cheat sheets · 6 subcategories

HTML master quick reference

Browse 181 commands from 12 focused cheat sheets on page 1 of 4. Each example opens its matching detailed section.

Document and Semantics · 13 commands

ARIA and Accessible Names in HTML Cheat Sheet

Open full cheat sheet
UseSyntaxExamples
Prefer a native button<button type="button">Save</button>View examples
Declare a custom button role<div role="button" tabindex="0">Save</div>View examples
Name from visible text<section aria-labelledby="billing-title">...</section>View examples
Name an icon-only control<button type="button" aria-label="Close"> <svg aria-hidden="true">...</svg> </button>View examples
Attach a description<input id="password" aria-describedby="password-help">View examples
Expose disclosure state<button aria-expanded="false" aria-controls="filters"> Filters </button>View examples
Expose toggle state<button type="button" aria-pressed="false">Mute</button>View examples
Mark the current item<a href="/docs" aria-current="page">Docs</a>View examples
Expose invalid state<input aria-invalid="true" aria-describedby="email-error">View examples
Announce polite status<div role="status" aria-live="polite"></div>View examples
Announce urgent error<div role="alert">Payment failed.</div>View examples
Hide decorative graphics<svg aria-hidden="true" focusable="false">...</svg>View examples
Mark updates in progress<section aria-busy="true" aria-live="polite"> ... </section>View examples

Document and Semantics · 24 commands

HTML Document Metadata Cheat Sheet

Open full cheat sheet
UseSyntaxExamples
Select standards mode<!doctype html>View examples
Declare page language<html lang="en">View examples
Declare UTF-8<meta charset="utf-8">View examples
Set the document title<title>Installation guide — Acme Docs</title>View examples
Describe the page<meta name="description" content="Install Acme locally and verify the setup.">View examples
Configure the viewport<meta name="viewport" content="width=device-width, initial-scale=1">View examples
Declare supported schemes<meta name="color-scheme" content="dark light">View examples
Set interface theme color<meta name="theme-color" content="#111827">View examples
Declare a canonical URL<link rel="canonical" href="https://example.com/guides/install/">View examples
Link a language version<link rel="alternate" hreflang="pt-BR" href="https://example.com/pt-br/guias/instalar/">View examples
Load a stylesheet<link rel="stylesheet" href="/assets/site.css">View examples
Declare an icon<link rel="icon" href="/assets/logo_only_transparent.png" type="image/png">View examples
Link an app manifest<link rel="manifest" href="/site.webmanifest">View examples
Set crawler directives<meta name="robots" content="index,follow,max-image-preview:large">View examples
Limit a text snippet<meta name="robots" content="max-snippet:160">View examples
Exclude a snippet block<aside data-nosnippet>Internal notes</aside>View examples
Set a shared-page title<meta property="og:title" content="Installation guide — Acme Docs">View examples
Set the shared-page type<meta property="og:type" content="article">View examples
Describe a shared page<meta property="og:description" content="Install Acme locally and verify the setup.">View examples
Set a share image<meta property="og:image" content="https://example.com/assets/install-card.png">View examples
Identify the shared URL<meta property="og:url" content="https://example.com/guides/install/">View examples
Add structured data<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article" } </script>View examples
Describe breadcrumb hierarchy<script type="application/ld+json"> { "@type": "BreadcrumbList" } </script>View examples
Set a referrer policy<meta name="referrer" content="strict-origin-when-cross-origin">View examples

Document and Semantics · 12 commands

HTML Global Attributes and Data Attributes Cheat Sheet

Open full cheat sheet
UseSyntaxExamples
Unique identifier<section id="billing">...</section>View examples
Class tokens<article class="card featured">...</article>View examples
Custom data<button data-order-id="A42">Open</button>View examples
Declare language<blockquote lang="pt-BR">...</blockquote>View examples
Declare direction<bdi dir="auto">اسم المستخدم</bdi>View examples
Hide irrelevant content<section hidden>Not currently relevant</section>View examples
Disable a subtree<main inert>...</main>View examples
Join natural tab order<div tabindex="0">Custom focus target</div>View examples
Programmatic focus only<h2 tabindex="-1">Results</h2>View examples
Enable editing<div contenteditable="plaintext-only"> Editable text </div>View examples
Request spelling checks<textarea spellcheck="true"></textarea>View examples
Protect a token from translation<code translate="no">npm run build</code>View examples

Document and Semantics · 16 commands

HTML Internationalization, Language, and Direction Cheat Sheet

Open full cheat sheet
UseSyntaxExamples
Declare the document language<html lang="en-US">View examples
Mark a language change<span lang="fr">Crème brûlée</span>View examples
Protect a token from translation<code translate="no">ServerFault</code>View examples
Link a localized equivalent<link rel="alternate" hreflang="pt-BR" href="https://example.com/pt-br/guia/">View examples
Set right-to-left direction<html lang="ar" dir="rtl">View examples
Infer direction for unknown text<p dir="auto">User-provided text</p>View examples
Isolate unknown inline text<bdi class="username">مريم</bdi>View examples
Show text with an explicit override<bdo dir="rtl">ABC-123</bdo>View examples
Inspect a locale tagconst locale = new Intl.Locale('zh-Hant-TW')View examples
Check supported localesIntl.DateTimeFormat.supportedLocalesOf(['pt-BR', 'fr-CA'])View examples
Format a localized datenew Intl.DateTimeFormat('de-DE', { dateStyle: 'long', timeZone: 'UTC' }).format(date)View examples
Format currencynew Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(1299.9)View examples
Format a conjunction listnew Intl.ListFormat('en', { style: 'long', type: 'conjunction' }).format(names)View examples
Select a plural categorynew Intl.PluralRules('en').select(count)View examples
Segment wordsconst parts = [...new Intl.Segmenter('ja', { granularity: 'word' }).segment(text)]View examples
Select elements by language:lang(ar) { font-family: system-ui, sans-serif; }View examples

Document and Semantics · 12 commands

HTML Lists and Text Semantics Cheat Sheet

Open full cheat sheet
UseSyntaxExamples
Unordered list<ul><li>Alpha</li><li>Beta</li></ul>View examples
Ordered list<ol><li>Install</li><li>Configure</li></ol>View examples
Continue numbering<ol start="4"><li>Verify</li></ol>View examples
Description list<dl> <dt>API</dt> <dd>Application programming interface</dd> </dl>View examples
Strong importance<strong>Back up the database first.</strong>View examples
Stress emphasis<em>Never</em> commit the secret.View examples
Inline codeRun <code>npm test</code> before merging.View examples
Preformatted block<pre><code>line one&#10;line two</code></pre>View examples
Inline quotation<q cite="https://example.com/source">Short quote</q>View examples
Block quotation<blockquote cite="https://example.com/source"> <p>Quoted passage.</p> </blockquote>View examples
Machine-readable time<time datetime="2026-08-12">August 12</time>View examples
Machine-readable value<data value="SKU-42">Blue notebook</data>View examples

Document and Semantics · 16 commands

HTML Structured Data and Microdata Cheat Sheet

Open full cheat sheet
UseSyntaxExamples
Create an untyped item<article itemscope>Content</article>View examples
Assign a vocabulary type<article itemscope itemtype="https://schema.org/Article"> Content </article>View examples
Add a text property<h1 itemprop="headline">A practical guide</h1>View examples
Assign two property names<span itemprop="name alternateName">Acme Tools</span>View examples
Nest a related item<span itemprop="author" itemscope itemtype="https://schema.org/Person"> Author </span>View examples
Identify an item globally<article itemscope itemtype="https://schema.org/Article" itemid="https://example.com/articles/42#article">View examples
Reference a property elsewhere<article itemscope itemref="shared-license"> Content </article>View examples
Publish a URL value<a itemprop="url" href="https://example.com/articles/42"> Canonical article </a>View examples
Publish an image URL<img itemprop="image" src="https://example.com/images/42.jpg" alt="Workshop table">View examples
Publish a machine-readable date<time itemprop="datePublished" datetime="2026-08-12"> August 12, 2026 </time>View examples
Publish a machine value<data itemprop="sku" value="ACME-2048">Model 2048</data>View examples
Add a non-visible property value<meta itemprop="inLanguage" content="en-US">View examples
Embed JSON-LD<script type="application/ld+json"> {"@context":"https://schema.org","@type":"Article"} </script>View examples
Identify a JSON-LD node{ "@id": "https://example.com/articles/42#article", "@type": "Article" }View examples
Publish several graph nodes{ "@context": "https://schema.org", "@graph": [{ "@type": "Article" }, { "@type": "Person" }] }View examples
Serialize structured datajson.dumps(graph, ensure_ascii=False)View examples

Document and Semantics · 14 commands

HTML Tables Cheat Sheet

Open full cheat sheet
UseSyntaxExamples
Create a data table<table> <tr> <th>Plan</th> <th>Price</th> </tr> <tr> <td>Basic</td> <td>$9</td> </tr> </table>View examples
Name the table<table> <caption>Monthly subscriptions</caption> <tr> <th>Plan</th> <th>Users</th> </tr> </table>View examples
Group header rows<thead> <tr> <th scope="col">Product</th> <th scope="col">Sales</th> </tr> </thead>View examples
Group body rows<tbody> <tr> <th scope="row">Keyboard</th> <td>42</td> </tr> </tbody>View examples
Group summary rows<tfoot> <tr> <th scope="row">Total</th> <td>42</td> </tr> </tfoot>View examples
Mark a column header<th scope="col">Revenue</th>View examples
Mark a row header<th scope="row">January</th>View examples
Expand a short header<th scope="col" abbr="Quantity">Qty</th>View examples
Span header columns<th scope="colgroup" colspan="2">First half</th>View examples
Span header rows<th scope="rowgroup" rowspan="2">Europe</th>View examples
Group table columns<colgroup> <col class="label-column"> <col span="2" class="number-column"> </colgroup>View examples
Identify a complex header<th id="q1-sales">Q1 sales</th>View examples
Associate several headers<td headers="europe q1-sales">120</td>View examples
Expose sort direction<th scope="col" aria-sort="ascending"> <button type="button">Name</button> </th>View examples

Document and Semantics · 15 commands

Semantic HTML Cheat Sheet

Open full cheat sheet
UseSyntaxExamples
Mark the page header<header><h1>Documentation</h1></header>View examples
Mark primary navigation<nav aria-label="Primary"> <a href="/docs/">Docs</a> </nav>View examples
Mark the main content<main id="main-content"></main>View examples
Mark the page footer<footer><small>Copyright 2026</small></footer>View examples
Create a standalone article<article><h2>Release notes</h2></article>View examples
Create a named section<section aria-labelledby="setup-title"> <h2 id="setup-title">Setup</h2> </section>View examples
Mark related content<aside aria-labelledby="related-title"> <h2 id="related-title">Related</h2> </aside>View examples
Name the page<h1>Deployment guide</h1>View examples
Name a subsection<h3>Environment variables</h3>View examples
Caption a figure<figure> <img src="chart.svg" alt=""> <figcaption>Monthly requests</figcaption> </figure>View examples
Encode a date<time datetime="2026-08-12">August 12, 2026</time>View examples
Mark contact information<address> <a href="mailto:docs@example.com"> Documentation team </a> </address>View examples
Create an unordered list<ul><li>HTML</li><li>CSS</li></ul>View examples
Create an ordered list<ol><li>Install</li><li>Build</li></ol>View examples
Create a description list<dl> <dt>API</dt> <dd>Application programming interface</dd> </dl>View examples

Forms and Interaction · 12 commands

HTML Buttons and Native Controls Cheat Sheet

Open full cheat sheet
UseSyntaxExamples
Neutral button<button type="button">Preview</button>View examples
Submit button<button type="submit">Save</button>View examples
Reset button<button type="reset">Reset</button>View examples
Disable a control<button type="button" disabled>Unavailable</button>View examples
Associate with another form<button type="submit" form="profile"> Save profile </button>View examples
Single select<select name="region"> <option value="sa">South America</option> </select>View examples
Multiple select<select name="roles" multiple> <option>Editor</option> </select>View examples
Group options<optgroup label="Americas"> <option value="br">Brazil</option> </optgroup>View examples
Known progress<progress value="65" max="100">65%</progress>View examples
Unknown progress<progress>Loading</progress>View examples
Scalar measurement<meter min="0" max="100" low="30" high="80" optimum="90" value="72"> 72 </meter>View examples
Calculation output<output for="price quantity" name="total">0</output>View examples

Forms and Interaction · 13 commands

HTML Clipboard and Web Share APIs Cheat Sheet

Open full cheat sheet
UseSyntaxExamples
Copy plain textawait navigator.clipboard.writeText(text)View examples
Read plain textconst text = await navigator.clipboard.readText()View examples
Write multiple formatsawait navigator.clipboard.write([new ClipboardItem({ 'text/plain': plainBlob, 'text/html': htmlBlob })])View examples
Inspect clipboard itemsconst items = await navigator.clipboard.read()View examples
Check a write typeClipboardItem.supports('image/png')View examples
Customize a copyevent.clipboardData.setData('text/plain', value)View examples
Inspect a pasteconst text = event.clipboardData.getData('text/plain')View examples
Replace default pasteevent.preventDefault()View examples
Detect API availabilityif (isSecureContext && navigator.clipboard) { /* enhance */ }View examples
Delegate clipboard accessPermissions-Policy: clipboard-read=(self), clipboard-write=(self)View examples
Open the share chooserawait navigator.share({ title, text, url })View examples
Validate file sharingnavigator.canShare?.({ files })View examples
Register a PWA share target"share_target": { "action": "/share/", "method": "POST", "params": { "text": "text" } }View examples

Forms and Interaction · 18 commands

HTML Constraint Validation API Cheat Sheet

Open full cheat sheet
UseSyntaxExamples
Require a value<input id="email" name="email" type="email" required>View examples
Constrain text length<input name="username" minlength="3" maxlength="24">View examples
Require a text pattern<input name="code" pattern="[A-Z]{3}-[0-9]{4}" title="AAA-1234">View examples
Constrain a number<input name="quantity" type="number" min="1" max="20" step="1">View examples
Check validation eligibilityif (control.willValidate) inspect(control.validity)View examples
Inspect the validity stateconst { valueMissing, typeMismatch, valid } = email.validityView examples
Read the browser messageconst message = control.validationMessageView examples
Check one controlconst valid = control.checkValidity()View examples
Check a whole formconst valid = form.checkValidity()View examples
Report invalid controlsconst valid = form.reportValidity()View examples
Capture invalid eventsform.addEventListener('invalid', handleInvalid, true)View examples
Set a custom errorconfirmation.setCustomValidity('Email addresses must match.')View examples
Clear a custom errorconfirmation.setCustomValidity('')View examples
Request normal submissionform.requestSubmit(saveButton)View examples
Submit without validationHTMLFormElement.prototype.submit.call(form)View examples
Disable submit-time validation<form action="/import" method="post" novalidate>View examples
Bypass validation for one action<button type="submit" formnovalidate name="action" value="draft"> Save draft </button>View examples
Style invalid user inputinput:user-invalid { border-color: var(--error-color); }View examples
Back to HTML cheat sheets
CMDMEMO TERMINALREAD ONLY