Anzeige von Computercode in HTML

HTML bietet spezielle Tags zur Darstellung von Computercode, Tastenkombinationen, Ausgaben oder vorformatiertem Text. Diese helfen dabei, Code visuell vom normalen Inhalt abzugrenzen.

Das <code>-Element

Das <code>-Element wird für die Inline-Anzeige einer einzelnen Zeile oder eines kleinen Codeschnipsels verwendet. Es erscheint typischerweise im Fließtext.

<p>To print something, use <code>console.log()</code> in JavaScript.</p>

Das <pre>-Element

Das <pre>-Tag (für vorformatierten Text) bewahrt Leerzeichen, Zeilenumbrüche und die genaue Formatierung. Es ist ideal für ganze Codeblöcke und wird oft mit <code> kombiniert.

<pre>
function greet(name) {
  console.log("Hello " + name);
}
</pre>

Das <kbd>-Element

Das <kbd>-Tag markiert Tasten oder Tastenkombinationen, die der Benutzer drücken soll – z. B. Strg + C, Enter oder ESC.

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save the file.</p>

Das <samp>-Element

Das <samp>-Tag stellt Ausgaben eines Computers oder Programms dar. Es wird verwendet, um Ergebnisse wie Fehlermeldungen oder Systemantworten anzuzeigen.

<p>The output is: <samp>File not found.</samp></p>

Best Practices

Verwende <code> für kurze Inline-Snippets und <pre> für vollständige Codeblöcke. Vermeide zu viele Stilvarianten – Klarheit ist entscheidend.

Visuelles Beispiel

So kannst du <pre> und <code> kombinieren, um formatierten Code korrekt darzustellen:

<pre><code>
function sum(a, b) {
  return a + b;
}
</code></pre>

Häufige Fehler

Verwende <code> nicht für lange Blöcke oder alleine in Absätzen. Nutze stets semantische Tags für ein besseres Verständnis.

Zusammenfassung der Code-Darstellung

Die Tags <code>, <pre>, <kbd> und <samp> haben jeweils spezifische Zwecke. Sie verbessern die Lesbarkeit und Barrierefreiheit technischer Inhalte.