Das code-Element kennzeichnet Quelltext, einen Befehl oder einen Dateinamen. Es steht in der Zeile und ändert nichts am Umbruchverhalten. Für mehrzeiligen Code kommt pre hinzu, das Leerzeichen und Zeilenumbrüche erhält.

Beide Formen

<p>Der Befehl <code>git status</code> zeigt den Stand an.</p>

<pre><code>function gruss(name) {
  return "Hallo " + name;
}</code></pre>

Die Verschachtelung pre um code ist die empfohlene Form: pre erhält die Formatierung, code sagt, dass es sich um Quelltext handelt. Eines allein täte jeweils nur die Hälfte.

Die Regel, ohne die nichts funktioniert

Spitze Klammern im Codebeispiel müssen maskiert werden. Sonst beginnt der Parser an dieser Stelle ein Element, und das Beispiel verschwindet aus der Seite:

<!-- falsch: der Absatz wird gerendert, nicht angezeigt -->
<code><p>Text</p></code>

<!-- richtig -->
<code>&lt;p&gt;Text&lt;/p&gt;</code>

Zu maskieren sind zwingend die öffnende spitze Klammer und das kaufmännische Und. Wer viele Beispiele schreibt, sollte das automatisieren – von Hand wird es früher oder später vergessen, und der Fehler ist unsichtbar, bis jemand den Quelltext ansieht.

Kein Einrücken im Quelltext

Weil pre alle Leerzeichen erhält, wandert die Einrückung der HTML-Datei in die Anzeige. Das öffnende Tag steht deshalb direkt vor dem Code, ohne Zeilenumbruch dazwischen:

<pre><code>erste Zeile
zweite Zeile</code></pre>

Verwandte Elemente

<kbd>…</kbd>     Tasteneingabe des Nutzers
<samp>…</samp>   Ausgabe eines Programms
<var>…</var>     Variable oder Platzhalter

In einer Anleitung ergibt die Unterscheidung Sinn: kbd für das, was der Leser tippt, samp für das, was danach auf dem Bildschirm steht.

Zugänglichkeit und Umbruch

Lange Codezeilen erzeugen waagerechtes Scrollen. Auf schmalen Bildschirmen ist das schnell unbrauchbar. Ein Umbruch innerhalb des Blocks hilft, sollte aber sichtbar bleiben:

pre {
  overflow-x: auto;
  tab-size: 2;
}

Ganz auf Scrollen zu verzichten und stattdessen hart umzubrechen ist bei Code riskant – ein Umbruch an falscher Stelle verändert das Beispiel.