The essentials
Quick reference
One focused task per row. Jump to the related section for complete, working examples.
| 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 |
Choose elements for the meaning of the content, not their default appearance. Lists expose relationships between items, while inline semantics distinguish emphasis, code, quotations, dates, edits, and machine-readable values. CSS can change presentation without erasing that structure.
Step by step
Detailed examples
Match the list to the relationship
Use ul when sequence is incidental and ol when it conveys steps, rank, or chronology. Each direct item is an li, which may contain paragraphs, headings, or nested lists. Do not simulate lists with repeated div elements and punctuation.
<ol>
<li>Install the package</li>
<li>Configure it
<ul>
<li>Choose a port</li>
<li>Set credentials</li>
</ul>
</li>
<li>Verify the service</li>
</ol>Associate terms with descriptions
A dl contains groups of dt terms and dd descriptions. One term may have several descriptions and several terms may share one description. Use it for glossaries and name-value metadata, not solely to obtain a two-column layout.
<dl>
<dt>Version</dt><dd>3.2.1</dd>
<dt>License</dt><dd>MIT</dd>
<dt>Maintainers</dt><dd>Ada</dd><dd>Lin</dd>
</dl>Distinguish importance from emphasis
strong expresses importance; em expresses stress. Their visual styles are conventional but not guaranteed. Use b or i only when their more specific non-emphasis meanings fit, and use CSS spans when the distinction is purely visual.
<p><strong>Warning:</strong> This removes production data. It is <em>not</em> reversible.</p>Represent code and preserved text
code identifies computer-language fragments. Wrap a block in pre when whitespace and line breaks are significant; escape markup characters inside it. kbd represents user input, samp program output, and var a variable or placeholder.
<p>Press <kbd>Enter</kbd> after running <code>python -V</code>.</p>
<pre><samp>Python 3.14.0</samp></pre>Mark sources and document edits
q and blockquote mark quoted content; cite attributes hold source URLs but are not normally visible, so provide a human-facing citation too. ins and del identify additions and removals and can carry datetime metadata.
<blockquote cite="https://example.com/release">
<p>The API is stable.</p>
</blockquote>
<p>Source: <cite>Release notes</cite></p>
<p><del datetime="2026-08-01">Beta</del> <ins datetime="2026-08-12">Stable</ins></p>Pair readable labels with exact values
time accepts valid date/time strings in datetime and data accepts a general value. Keep displayed text understandable without machine processing. These elements add semantics but do not automatically localize, calculate, or validate the value.
<p>Released <time datetime="2026-08-12T09:00:00-03:00">August 12 at 9 AM</time>.</p>
<p>Item: <data value="CMD-1042">Command notebook</data></p>Local code tester
Try semantic text structures
Edit lists, metadata, quotations, and technical text while preserving their meaning.
Sources and further reading
References
Authoritative documentation used to verify and expand this cheat sheet.
Help us improve
Found a typo or missing example?
Tell us what would make this cheat sheet clearer, more complete, or more useful.