<code>

Zuletzt aktualisiert am 3. Februar 2026

Das <code>-Element kennzeichnet ein Stück Programmcode innerhalb eines Textes. Browser stellen es standardmäßig in einer Monospace-Schrift dar, sodass es sich visuell vom umgebenden Text abhebt. Ob du eine Variable, einen Funktionsnamen, einen Terminal-Befehl oder einen Dateinamen erwähnst: <code> ist dafür das richtige Element. Für mehrzeilige Code-Blöcke kombinierst du es mit <pre>.

Grundlagen

<code> ist für Inline-Codeschnipsel gedacht: einzelne Begriffe oder kurze Ausdrücke, die im Fließtext stehen. Für ganze Code-Blöcke nutzt du die Kombination <pre><code>.

• <code> ist ein Inline-Element: Es fließt im Text mit und erzeugt keinen Zeilenumbruch
• Browser stellen <code> in einer Monospace-Schrift dar (z.B. Courier New, Consolas)
• Es markiert Text semantisch als Programmcode: Screenreader können das erkennen und entsprechend kommunizieren
• Für mehrzeilige Code-Blöcke verwendest du <pre><code>...</code></pre>
• Verwandte Elemente: <kbd> für Tastatureingaben, <samp> für Programmausgaben, <var> für Variablen

Syntax

<p>Verwende die Funktion <code>getElementById()</code> um ein Element zu finden.</p>

Beispiele

Inline-Code im Fließtext

Der häufigste Anwendungsfall: Du erwähnst Code-Begriffe in einem erklärenden Text:

<p>
  Speichere den Wert mit <code>localStorage.setItem("key", "value")</code>
  und lese ihn mit <code>localStorage.getItem("key")</code> wieder aus.
</p>

Code-Block mit pre und code

Für mehrzeiligen Code kombinierst du <code> mit <pre>. Das <pre> bewahrt die Formatierung, das <code> markiert den Inhalt als Programmcode:

<pre><code>const name = "Mario";
const greeting = `Hallo, ${name}!`;
console.log(greeting);</code></pre>

Dateinamen und Terminal-Befehle

Auch Dateinamen, Dateipfade und Terminal-Befehle können mit <code> markiert werden:

<p>
  Öffne die Datei <code>index.html</code>
  und führe <code>npm run dev</code> im Terminal aus.
</p>

Barrierefreiheit

Manche Screenreader kündigen <code>-Elemente an, indem sie “Code” vor und nach dem Inhalt sagen. Das hilft Nutzern zu verstehen, dass es sich um einen technischen Begriff handelt und nicht um normalen Text. Dieses Verhalten variiert allerdings zwischen verschiedenen Screenreadern.

Achte darauf, dass Code-Begriffe im umgebenden Text ausreichend Kontext haben. Ein isoliertes <code>getElementById()</code> ohne Erklärung hilft niemandem, weder sehenden noch blinden Nutzern. Schreibe stattdessen: “Verwende die Funktion getElementById(), um ein Element anhand seiner ID zu finden.”

Bei mehrzeiligen Code-Blöcken (<pre><code>) ist die semantische Auszeichnung besonders wichtig, damit Screenreader den gesamten Block als zusammenhängenden Code erkennen und Nutzern die Möglichkeit geben, ihn zu überspringen.

Häufige Fehler

• code ohne pre für mehrzeilige Blöcke: Ein einzelnes <code> allein bewahrt keine Zeilenumbrüche und Einrückungen. Für Code-Blöcke brauchst du immer <pre><code>.

• Monospace-Schrift statt code verwenden: <span style="font-family: monospace"> sieht zwar gleich aus, aber Screenreader und Suchmaschinen erkennen es nicht als Code. Verwende immer das semantische <code>-Element.

• code für Nicht-Code: <code> ist für Programmcode, Befehle und technische Begriffe gedacht. Verwende es nicht einfach, um Text in Monospace darzustellen. Dafür gibt es CSS.

Browser-Kompatibilität

Das code-Element wird von allen Browsern seit den Anfängen des Webs unterstützt.

Email-Kompatibilität

Das code-Element wird in den meisten Email-Clients grundsätzlich unterstützt, aber die Monospace-Darstellung ist nicht überall konsistent.

Verwandte Elemente