<samp>: Das Sample Output-Element

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das <samp> HTML-Element wird verwendet, um Inline-Text, der als Beispiel- oder zitiertes Ausgabeergebnis eines Computerprogramms steht, einzuschließen. Sein Inhalt wird typischerweise mit der standardmäßig monospaced Schriftart des Browsers gerendert (wie Courier oder Lucida Console).

Probieren Sie es aus

<p>I was trying to boot my computer, but I got this hilarious message:</p> <p> <samp>Keyboard not found <br />Press F1 to continue</samp> </p> 
samp { font-weight: bold; }

Attribute

Dieses Element umfasst nur die globale Attribute.

Nutzungshinweise

Sie können eine CSS-Regel verwenden, um die standardmäßige Schriftart des Browsers für das <samp>-Element zu überschreiben; es ist jedoch möglich, dass die Präferenzen des Browsers Vorrang vor den von Ihnen angegebenen CSS-Einstellungen haben.

Das CSS zur Überschreibung der standardmäßigen Schriftart könnte folgendermaßen aussehen:

css
samp { font-family: "Courier"; }

Hinweis: Wenn Sie ein Element benötigen, das als Container für von Ihrer Website oder App generierten JavaScript-Code fungiert, sollten Sie stattdessen das <output>-Element verwenden.

Beispiele

Einfaches Beispiel

In diesem einfachen Beispiel enthält ein Absatz ein Ausgabebeispiel eines Programms.

html
<p> When the process is complete, the utility will output the text <samp>Scan complete. Found <em>N</em> results.</samp> You can then proceed to the next step. </p>

Ergebnis

Musterausgabe einschließlich Benutzereingabe

Sie können das <kbd>-Element innerhalb eines <samp>-Blocks verschachteln, um ein Beispiel darzustellen, das vom Benutzer eingegebenen Text enthält. Zum Beispiel könnte dieser Text ein Transkript einer Linux- (oder macOS-) Konsolensitzung darstellen:

HTML

html
<pre> <samp><span class="prompt">mike@interwebz:~$</span> <kbd>md5 -s "Hello world"</kbd> MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62 <span class="prompt">mike@interwebz:~$</span> <span class="cursor">█</span></samp></pre>

Beachten Sie die Verwendung von <span>, um das Erscheinungsbild bestimmter Teile des Beispieltextes, wie der Shell-Eingabeaufforderungen und des Cursors, anzupassen. Beachten Sie auch, dass <kbd> verwendet wird, um den Befehl darzustellen, den der Benutzer an der Eingabeaufforderung im Beispieltext eingegeben hat.

CSS

Das CSS, das das gewünschte Erscheinungsbild erzielt, ist:

css
.prompt { color: #b00; } samp > kbd { font-weight: bold; } .cursor { color: #00b; }

Dies verleiht der Eingabeaufforderung und dem Cursor eine subtile Farbgebung und hebt die Tastatureingaben im Beispieltext hervor.

Ergebnis

Das daraus resultierende Ausgabebeispiel sieht so aus:

Technische Zusammenfassung

Inhaltskategorien Fließender Inhalt, Phrasierter Inhalt, fühlbarer Inhalt.
Erlaubter Inhalt Phrasierter Inhalt.
Tag-Auslassung Keine, sowohl das Start- als auch das End-Tag sind obligatorisch.
Erlaubte Eltern Jedes Element, das phrasierte Inhalte akzeptiert.
Implizierte ARIA-Rolle generisch
Erlaubte ARIA-Rollen Beliebig
DOM-Schnittstelle [`HTMLElement`](/de/docs/Web/API/HTMLElement)

Spezifikationen

Specification
HTML
# the-samp-element

Browser-Kompatibilität

Siehe auch