<samp>
Das <samp>-Element kennzeichnet Ausgaben von Computerprogrammen, also Text, den ein System, ein Programm oder ein Script ausgibt. Browser stellen <samp> standardmäßig in Monospace-Schrift dar. Typische Anwendungsfälle sind Terminal-Ausgaben, Fehlermeldungen, Statusmeldungen oder Systemnachrichten. <samp> ist das Gegenstück zu <kbd>: Während <kbd> beschreibt, was der Nutzer eingibt, beschreibt <samp>, was der Computer ausgibt. Zusammen mit <code> (für Quellcode) bilden sie ein semantisches Trio für technische Dokumentationen. Auf dieser Seite lernst du, wann <samp> die richtige Wahl ist und wie du es mit <pre> für mehrzeilige Ausgaben kombinierst.
- Kategorie
- Text & Typografie
- Art
- Inline
- Beispiele
- 3
- Browser
- 5 von 5
- 2 von 5
- Stand
- 04.02.2026
Grundlagen
In Tutorials und Dokumentationen zeigst du oft, was der Computer nach einem Befehl ausgibt: eine Erfolgsmeldung, eine Fehlermeldung oder das Ergebnis einer Berechnung. Mit <samp> machst du diese Ausgabe semantisch als Computerausgabe erkennbar.
<samp>ist ein Inline-Element: Es fließt im Text mit und erzeugt keinen Zeilenumbruch- Browser stellen
<samp>standardmäßig in Monospace-Schrift dar (gleiche Schrift wie<code>und<kbd>) - Die semantische Bedeutung: “Dies ist die Ausgabe eines Computerprogramms”
- Typische Anwendungsfälle: Terminal-Ausgaben, Fehlermeldungen, Statusmeldungen, Berechnungsergebnisse
<samp>hat keine elementspezifischen Attribute, nur die globalen HTML-Attribute- Für mehrzeilige Ausgaben kombinierst du
<samp>mit<pre>, um Zeilenumbrüche und Einrückungen beizubehalten
Syntax
<p>Die Konsole gibt <samp>Hello World!</samp> aus.</p>Beispiele
3 BeispieleWenn du in einem Tutorial auf eine Fehlermeldung oder Systemnachricht hinweisen willst, macht <samp> klar, dass dieser Text vom Computer stammt:
<p>
Wenn die Datei nicht existiert, siehst du:
<samp>Error: ENOENT: no such file or directory</samp>
</p>
<p>
Bei erfolgreicher Installation erscheint:
<samp>added 150 packages in 12s</samp>
</p>Für mehrzeilige Terminal-Ausgaben kombinierst du <pre> und <samp>. <pre> erhält die Formatierung (Zeilenumbrüche, Leerzeichen), <samp> liefert die Semantik:
<pre><samp>$ npm run build
> astro build
Building...
✓ 42 pages built in 3.2s
✓ Output: ./dist/</samp></pre>In einer Terminal-Dokumentation kannst du <kbd> und <samp> kombinieren, um den Dialog zwischen Nutzer und System darzustellen:
<p>
Gib <kbd>node --version</kbd> ein.
Die Ausgabe sollte so aussehen: <samp>v20.11.0</samp>
</p>
<p>
Prüfe dann mit <kbd>npm --version</kbd>:
erwartet wird <samp>10.2.4</samp> oder höher.
</p>Barrierefreiheit
3 Punkte- Screenreader-Verhalten: Die meisten Screenreader behandeln
<samp>wie normalen Text und kündigen es nicht gesondert an. Der Nutzer hört den Inhalt, erfährt aber nicht automatisch, dass es eine Computerausgabe ist. - Kontext bieten: Beschreibe im umgebenden Text, dass es sich um eine Ausgabe handelt, z.B. “Die Konsole gibt aus:” oder “Du siehst folgende Meldung:”. So verstehen auch Screenreader-Nutzer den Zusammenhang.
- Mehrzeilige Ausgaben mit pre: Bei längeren Ausgaben verwende
<pre><samp>...</samp></pre>. Screenreader kündigen<pre>oft als “vorformatierter Text” an, was den Nutzer auf eine spezielle Darstellung vorbereitet.
Häufige Fehler
3 Punkte-
samp für Quellcode verwenden:
<samp>ist für Computerausgaben, nicht für Quellcode. Wenn du eine JavaScript-Funktion oder CSS-Regel zeigen willst, verwende<code>. Die Unterscheidung:<code>= “das ist Code”,<samp>= “das hat der Computer ausgegeben”. -
samp für Benutzereingaben verwenden: Wenn du zeigen willst, was der Nutzer eintippen soll, verwende
<kbd>.<samp>ist nur für die Ausgabe des Computers,<kbd>für die Eingabe des Nutzers. -
Mehrzeilige Ausgaben ohne pre:
<samp>allein ist ein Inline-Element und erhält keine Zeilenumbrüche. Für mehrzeilige Terminal-Ausgaben brauchst du<pre><samp>...</samp></pre>.
Browser-Kompatibilität
5 von 5Das samp-Element wird von allen Browsern seit den Anfängen des Webs unterstützt.
-
Chrome
Komplett
-
Firefox
Komplett
-
Safari
Komplett
-
Edge
Komplett
-
Opera
Komplett
Email-Kompatibilität
2 von 5Die Unterstützung von samp in Email-Clients ist eingeschränkt. Wie bei kbd wird die Monospace-Darstellung nicht überall übernommen.
-
Apple Mail
Komplett
-
Gmail
Teilweise
Das Element wird gerendert, aber die Monospace-Schrift wird nicht immer angewendet
-
Outlook
Teilweise
Ältere Versionen ignorieren samp. Verwende inline font-family: monospace als Fallback
-
Thunderbird
Komplett
-
Yahoo Mail
Teilweise
Monospace-Schrift wird nicht immer dargestellt
Newsletter
einmal die Woche, kostenlosNeue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.
Zuletzt verschickt · KW 40
Einmal alles neu, und die Lernplattform ist da