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>

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
<del>This line of text is meant to be treated as deleted text.</del>
<s>This line of text is meant to be treated as no longer accurate.</s>
<ins>This line of text is meant to be treated as an addition to the document.</ins>
<u>This line of text will render as underlined</u>
<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><sup>2</sup> ≠ 0
Snippets of code with <code>...</code> tags.
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>

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>