HTML <samp>-Tag
Das HTML <samp>-Tag ist ein Inline-Element zur Auszeichnung von Beispielausgaben eines Programms oder Systems. Mit W3docs-Beispielen.
Das HTML <samp>-Tag markiert Beispielausgaben eines Computerprogramms, Skripts oder Systems — also den Text, den ein Programm an den Benutzer zurückgibt. Standardmäßig rendern Browser den Inhalt in einer Monospace-Schrift.
<samp> ist ein Inline-Phrasierungselement, kein Block-Element. Es fließt innerhalb einer Textzeile, genau wie <em> oder <code>, und erzeugt weder einen Absatzumbruch noch eine eigene Box. Wenn Sie eine mehrzeilige Ausgabe anzeigen möchten, bei der Zeilenumbrüche und Abstände erhalten bleiben, schließen Sie das <samp>-Element in ein <pre>-Element ein.
Wann <samp> verwenden
<samp> ist eines von mehreren Monospace-„technischen" Elementen. Der Unterschied zwischen ihnen ist semantisch, nicht visuell:
- Verwenden Sie
<code>für Quellcode — Text, den ein Programmierer schreibt. - Verwenden Sie
<samp>für die Ausgabe, die ein Programm erzeugt. - Verwenden Sie
<kbd>für Tastatur-Eingaben, die der Benutzer tippen soll. - Verwenden Sie
<var>für einen Variablen- oder Platzhalternamen.
Die Faustregel lautet: Wenn ein Mensch oder ein anderes Programm es getippt hat, ist es <kbd> oder <code>; wenn der Computer es ausgegeben hat, ist es <samp>.
Wenn Sie einen Live-Container benötigen, den JavaScript mit dem Ergebnis einer Berechnung befüllt, verwenden Sie stattdessen das <output>-Element — <samp> dient zur Darstellung von Ausgaben als statischen, ausgezeichneten Text.
Syntax
Das <samp>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<samp>) und dem schließenden (</samp>) Tag geschrieben.
Beispiele
Befehls- und Terminal-Ausgabe
Eine häufige Verwendung ist die Dokumentation, was ein Befehl ausgibt. Hier ist der vom Leser eingegebene Befehl in <kbd> eingeschlossen, und die Antwort ist in <samp> eingeschlossen:
<!DOCTYPE html>
<html>
<head>
<title>Command output</title>
</head>
<body>
<p>Type <kbd>node --version</kbd> and you will see something like <samp>v20.11.1</samp>.</p>
<p>Full session:</p>
<pre><samp>$ npm run build
> [email protected] build
> next build
✓ Compiled successfully
Done in 4.21s.</samp></pre>
</body>
</html>Bei mehrzeiliger Ausgabe wie dem obigen Build-Log wird <samp> innerhalb von <pre> platziert: <pre> bewahrt Leerzeichen und Zeilenumbrüche, während <samp> die Bedeutung hinzufügt („das ist Programmausgabe").
Eine Anwendungsfehlermeldung
<samp> eignet sich auch gut, um die genaue Meldung zu zitieren, die ein System dem Benutzer anzeigt:
<p>
If the upload fails, the application displays:
<samp>Error 413: Payload too large. Maximum file size is 25 MB.</samp>
</p><samp>, <code>, <kbd> und <var> im Vergleich
Dieses Beispiel zeigt die vier verwandten Elemente nebeneinander, damit Sie vergleichen können, wie jedes einzelne verwendet wird:
<p>
Run <code>let total = price * qty;</code> where
<var>price</var> and <var>qty</var> are numbers.
Press <kbd>Enter</kbd> and the console prints
<samp>NaN</samp> if either variable is undefined.
</p>Attribute
Das <samp>-Tag unterstützt die globalen Attribute und die Ereignis-Attribute.
<samp> gestalten
Die standardmäßige Monospace-Schrift kann mit CSS überschrieben werden, in der Regel über die font-family-Eigenschaft — wobei Browser-Einstellungen oder User-Agent-Stylesheets Vorrang haben können. Ein gängiges Muster ist es, der Beispielausgabe einen dezenten Hintergrund zu geben, damit sie sich vom umgebenden Fließtext abhebt:
<!DOCTYPE html>
<html>
<head>
<style>
samp {
font-family: "Courier New", monospace;
background-color: #f4f4f4;
color: #c7254e;
padding: 2px 6px;
border-radius: 4px;
}
</style>
</head>
<body>
<p>The server responded with <samp>200 OK</samp>.</p>
</body>
</html>Barrierefreiheit
<samp> hat keine besondere Bedeutung für Hilfstechnologien — Screenreader lesen seinen Text genauso vor wie den umgebenden Fließtext und sagen nicht „Beispielausgabe". Sein Wert liegt für menschliche Autoren und für die Gestaltung, nicht für eine Rolle im Barrierefreiheitsbaum. Verlassen Sie sich nicht allein auf <samp>, um zu vermitteln, dass etwas eine Ausgabe ist; wenn diese Unterscheidung für den Leser wichtig ist, machen Sie es auch im sichtbaren Text deutlich (wie die obigen Beispiele mit Bezeichnungen wie „die Anwendung zeigt an:").