<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 einzuschließen, der eine Beispiel- (oder zitierte) Ausgabe von einem Computerprogramm darstellt. Der Inhalt wird typischerweise mit der Standard-Monospace-Schriftart des Browsers gerendert (wie Courier oder Lucida Console).

Probieren Sie es aus

Attribute

Dieses Element umfasst nur die globalen Attribute.

Verwendungshinweise

Sie können eine CSS-Regel verwenden, um die Standard-Schriftart des Browsers für das <samp> Element zu überschreiben; es ist jedoch möglich, dass die Browsereinstellungen Vorrang vor jedem angegebenen CSS haben.

Das CSS, um die Standard-Schriftart zu überschreiben, würde folgendermaßen aussehen:

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

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

Beispiele

Einfaches Beispiel

In diesem einfachen Beispiel enthält ein Absatz ein Beispiel für die Ausgabe 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

Beispielausgabe einschließlich Benutzereingaben

Sie können das <kbd> Element innerhalb eines <samp> Blocks verschachteln, um ein Beispiel zu präsentieren, das vom Benutzer eingegebenen Text enthält. Betrachten Sie zum Beispiel diesen Text, der ein Transkript einer Linux- (oder macOS-)Konsolensitzung darstellt:

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 Aussehen bestimmter Teile des Beispieltextes wie die Shell-Eingabeaufforderungen und den Cursor anzupassen. Beachten Sie auch die Verwendung von <kbd>, um den Befehl darzustellen, den der Benutzer an der Eingabeaufforderung im Beispieltext eingegeben hat.

CSS

Das CSS, das das gewünschte Aussehen erreicht, ist:

css
.prompt {
  color: #b00;
}

samp > kbd {
  font-weight: bold;
}

.cursor {
  color: #00b;
}

Dies gibt der Eingabeaufforderung und dem Cursor eine ziemlich subtile Farbgebung und stärkt die Tastatureingabe innerhalb des Beispieltextes.

Ergebnis

Das resultierende Ausgabeergebnis ist folgendes:

Technische Zusammenfassung

Inhaltskategorien Flussinhalt, Phrasierungsinhalt, greifbarer Inhalt.
Erlaubter Inhalt Phrasierungsinhalt.
Tag-Auslassung Keine, sowohl das Start- als auch das End-Tag sind obligatorisch.
Erlaubte Eltern Jedes Element, das Phrasierungsinhalt zulässt.
Implizierte ARIA-Rolle generic
Erlaubte ARIA-Rollen Beliebig
DOM-Schnittstelle [`HTMLElement`](/de/docs/Web/API/HTMLElement)

Spezifikationen

Specification
HTML
# the-samp-element

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
samp

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch