Typography sets the tone for the entire interface: clear hierarchies help readers scan, while consistent type choices build trust and reinforce the brand. Every heading, inline adjustment, or list conveys structure even before the words do, so thoughtful typography becomes an essential piece of interaction design.

The elements below collect the most common HTML primitives we rely on - headings, inline emphasis, quotes, lists, and more - so you can preview their styling in one place. Use these samples as guidance when composing new screens to ensure content flows logically and feels cohesive across the documentation site.

Headings communicate the outline of a page, from the single, page-level <h1> down to more granular <h6> sections. They make long-form content scannable, improve accessibility, and allow assistive technologies to navigate through the document structure.

Use headings in order without skipping levels so that screen readers can build a predictable document map, and reserve only one <h1> per view for the main title.

<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>

A heading with a subtitle or a tagline goes in an <hgroup>. Only the heading counts in the outline of the page; the paragraph below it is shown smaller and lighter, and belongs to the heading. Don’t use a lower heading level for a subtitle: it would add a section that isn’t there.

<hgroup>
  <h2>...</h2>
  <p>...</p>
</hgroup>

Inline styling communicates nuance inside a paragraph - whether that is emphasis, provenance, code, or mathematical notation. These elements keep the text flowing while still providing semantic hooks that CSS and assistive tech can interpret for better accessibility.

Favor semantics over presentation: choose the tag that best describes the intent (e.g., <em> for stress emphasis vs. <strong> for importance) so future readers can restyle or localize appropriately.

You can use the mark tag to <mark>highlight</mark> text.
A <u>mispelled</u> word is marked with a wavy line.
<small>This line of text is meant to be treated as fine print.</small>
<strong>This line rendered as bold text.</strong>
<em>This line rendered as italicized text.</em>
<var>f</var>(<var>x</var>) = <var>a</var><sub>0</sub> + <var>a</var><sub>1</sub><var>x</var> + <var>a</var><sub>2</sub><var>x</var><sup>2</sup>, where <var>a</var><sub>2</sub> ≠ 0
Snippets of code with <code>...</code> tags.
Divide the <var>total</var> by the number of <var>items</var>.
Keyboard input is viewed like <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>F8</kbd> or <kbd>ls -gto</kbd>.
Computer sample output is displayed like: <samp>Press F1 to continue</samp>

<u> is not for emphasis: it marks text with a note on it, such as a spelling mistake or a name in Chinese text. Nausikaä gives it a wavy line, because a straight underline looks like a link. <kbd> looks like a key, with a thicker bottom edge. <var>, a variable in code or in a formula, uses the code font in italics, without a box.

E-ink: in the e-ink theme these elements lose their colors: <code> is black on white with a border, <kbd> is light grey, <samp> is white on black and <mark> has a plain light grey background.

Edits to a document, such as a revised price, a corrected article or the changes in a contract, are marked with <del> for removed text and <ins> for added text. <s> is for text that is no longer accurate but wasn’t removed by an edit, like an old price next to a new one.

<del>...</del> <ins>...</ins>
<s>...</s>

Removed text has a red line through it, added text a green line under it, and outdated text a grey line through it. The line is through or under the text, so the difference doesn’t depend on color alone, and it stays in the e-ink theme and in forced colors mode.

Screen readers often read <del>, <ins> and <s> as ordinary text. Where the change matters, say so in words as well, for example with a visually-hidden “was” and “now”: <del><span class="visually-hidden">was </span>until 17:00</del>. Add datetime and cite attributes to record when and why the change was made.

A short quotation within a sentence goes in a <q>. The browser adds the quotation marks, in the style of the language set on the page or the element. The title of a work, such as a book, a film or a painting, goes in a <cite>, and is shown in italics. The term that a sentence defines goes in a <dfn>, which is shown in bold italics; give it an id, so other parts of the text can link to the definition.

In <cite>...</cite>, ... <q>...</q>
A <dfn id="...">...</dfn> is ...

Use <blockquote> for longer quotations that stand on their own, as shown below. Don’t use <q> for sarcasm or for words that aren’t a quotation: a screen reader may say “quote”.

Blockquotes call attention to sourced material, testimonials, or excerpts that deserve visual separation from the surrounding copy. Pair them with citations so readers immediately understand where the thought originated and can evaluate the context.

<blockquote>
  <p><strong>Blockquote</strong> ... </p>
  <footer>
    Someone famous in <cite title="Source">Cite Source</cite>
  </footer>
</blockquote>

Lists keep related concepts together and make scanning easier than long paragraphs. Use unordered lists (<ul>) when sequence is irrelevant and you simply want bullet points, and ordered lists (<ol>) when the items need an inherent ranking or step-by-step progression.

Unordered lists work well for navigation menus, feature highlights, pros-and-cons summaries, or any collection of items where users only need to understand membership, not sequence.

<ul>
  <li>...</li>
  <li>
    ...
    <ul>
      <li>...</li>
      <li>...</li>
      <li>...</li>
      <li>...</li>
    <ul>
  </li>
  <li>...</li>
  <li>...</li>
</ul>

Ordered lists shine for multi-step instructions, ranked results, timelines, or anywhere the number in front of each item adds clarity and meaning.

<ol>
  <li>...</li>
  <li>
    ...
    <ol>
      <li>...</li>
      <li>...</li>
      <li>...</li>
      <li>...</li>
    <ol>
  </li>
  <li>...</li>
  <li>...</li>
</ol>

Description lists (<dl>) pair a term (<dt>) with one or more descriptions (<dd>), making them ideal for glossaries, key-value metadata, or question-and-answer content. They provide a compact, semantic alternative to two-column tables.

Reach for description lists whenever you need to display definitions, metadata for resources (e.g., author, version, license), or structured FAQs where each question is immediately followed by its answer.

<dl>
  <dt>...</dt>
  <dd>...</dd>
  <dt>...</dt>
  <dd>...</dd>
</dl>

The <hr> element inserts a thematic break between sections, signaling a shift in topic or grouping. Visually it provides breathing room in dense layouts, and semantically it helps assistive technologies understand that the surrounding content is separated.

Insert a horizontal rule between standalone stories, to divide form sections (e.g., billing vs. shipping), or to separate comments from the composer controls.

<p>...</p>
<hr>
<p>...</p>

The <pre> element preserves whitespace and line breaks exactly as written, rendering its contents in a monospace face by default. It is perfect for displaying code snippets, log excerpts, or any text where spacing carries meaning.

main( ) {
  extern a, b, c;
  putchar(a); putchar(b); putchar(c); putchar('!*n');
}
 
a 'hell';
b 'o, w';
c 'orld';

Beyond code examples, preformatted blocks are useful for command-line transcripts, ASCII diagrams, configuration files, and other fixed-width artifacts.

<pre>...</pre>