2.6 — Code, Preformatted, and Computer Output Elements

Computer Output & Ingestion Elements

<code> – Inline Code

Use <code> for short syntax fragments, variable names, or commands. It renders in a monospace font and announces itself as a code fragment to screen readers.

<pre> – Preformatted Block

The <pre> element is block‑level and preserves every space, tab, and line break exactly as written. For a whole code listing, nest <code> inside <pre> – the combination is the standard for code blocks.

<pre>
  <code>
    function greet() {
      console.log("Hello, world!");
    }
  </code>
</pre>

function greet() {
  console.log("Hello, world!");
}

<kbd> and <samp> – Interaction Simulation

<kbd> marks explicit keyboard input (or voice commands). <samp> represents sample output from a program or terminal.

To depict a terminal session, nest <kbd> inside <samp>:

<samp>
  user@host:~$ <kbd>ls -l</kbd>
  total 12
  drwxr-xr-x  2 user user 4096 Jul 13 10:00 .
</samp>

<var> – Variables

Wrap mathematical or programming variables in <var> to visually differentiate them (italic by default) and signal their role to parsers.

Special Text Markers

<mark> – Highlighted Relevance

Use <mark> to highlight text for reference, like search‑match strings. It carries strong semantic weight; screen readers may announce "highlighted". Never use it purely as decoration.

<small> – Fine Print

The <small> element downgrades text priority – typically for disclaimers, copyright lines, or side comments. It reduces font size by default but remains block‑inline; the important part is the semantic role.

<u> – Unarticulated Annotation

Today <u> is no longer merely an underline; it marks text that has a non‑textual annotation (e.g., a misspelling indicator). It draws an underline to draw attention but shouldn't be confused with a hyperlink.

<sub> and <sup> – Baseline Shifts

<sub> drops text below the baseline (chemical formulas, indices). <sup> raises it above (exponents, ordinal indicators).

<wbr> – Word Break Opportunity

The void element <wbr> suggests a safe line‑break spot in long strings or URLs. It has no visible rendering but tells the layout engine, “break here if necessary”.

Ruby Annotations – Phonetic Guides

The <ruby> element provides phonetic annotations (Furigana, Pinyin) above or alongside base characters. It uses three child elements:

• <rt> – the annotation text (pronunciation).
• <rp> – fallback parentheses shown only if the browser doesn’t support ruby. Inside <ruby>, you place <rp>(</rp><rt>…</rt><rp>)</rp> so that older browsers display (reading) inline.

<ruby>
  漢字 <rp>(</rp><rt>kanji</rt><rp>)</rp>
</ruby>

Modern browsers display the ruby text above the base; older ones display 漢字 (kanji) – a perfect graceful degradation.