138 commands · 9 cheat sheets · HTML
Document and Semantics master quick reference
Browse 138 commands from 9 focused cheat sheets on page 1 of 1. Each example opens its matching detailed section.
Document and Semantics · 13 commands
ARIA and Accessible Names in HTML Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| 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
| Use | Syntax | Examples |
|---|---|---|
| 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
| Use | Syntax | Examples |
|---|---|---|
| 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
| Use | Syntax | Examples |
|---|---|---|
| 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 tag | const locale = new Intl.Locale('zh-Hant-TW') | View examples |
| Check supported locales | Intl.DateTimeFormat.supportedLocalesOf(['pt-BR', 'fr-CA']) | View examples |
| Format a localized date | new Intl.DateTimeFormat('de-DE', { dateStyle: 'long', timeZone: 'UTC' }).format(date) | View examples |
| Format currency | new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(1299.9) | View examples |
| Format a conjunction list | new Intl.ListFormat('en', { style: 'long', type: 'conjunction' }).format(names) | View examples |
| Select a plural category | new Intl.PluralRules('en').select(count) | View examples |
| Segment words | const 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
| Use | Syntax | Examples |
|---|---|---|
| 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 code | Run <code>npm test</code> before merging. | View examples |
| Preformatted block | <pre><code>line one 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
| Use | Syntax | Examples |
|---|---|---|
| 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 data | json.dumps(graph, ensure_ascii=False) | View examples |
Document and Semantics · 14 commands
HTML Tables Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| 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
| Use | Syntax | Examples |
|---|---|---|
| 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 |