<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 Ausgabe eines Computerprogramms repräsentiert, einzuschließen. Die Inhalte werden typischerweise mit der Standardschriftart mit fester Breite des Browsers angezeigt (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 enthält nur die globalen Attribute.

Nutzungshinweise

Sie können eine CSS-Regel verwenden, um die Standardschriftart für das <samp>-Element im Browser zu überschreiben; es ist jedoch möglich, dass die Einstellungen des Browsers gegenüber den von Ihnen angegebenen CSS-Vorgaben den Vorrang haben.

Das CSS, um die Standardschriftart zu überschreiben, sieht folgendermaßen aus:

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

Hinweis: Wenn Sie ein Element benötigen, das als Container für die von Ihrem JavaScript-Code generierte Ausgabe Ihrer Website oder App 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

Beispielanzeige mit 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. Zum Beispiel, betrachten Sie diesen Text, der ein Protokoll einer Linux- (oder macOS-) Konsolensitzung präsentiert:

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 die Darstellung spezifischer 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 bei der Eingabeaufforderung im Beispieltext eingegeben hat.

CSS

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

css
.prompt {
  color: #b00;
}

samp > kbd {
  font-weight: bold;
}

.cursor {
  color: #00b;
}

Dies verleiht der Eingabeaufforderung und dem Cursor eine recht subtile Kolorierung und hebt die Tastatureingabe innerhalb des Beispieltextes hervor.

Ergebnis

Die resultierende Ausgabe sieht folgendermaßen aus:

Technische Zusammenfassung

Inhaltskategorien Fließender Inhalt, Phrasierender Inhalt, greifbarer Inhalt.
Zulässiger Inhalt Phrasierender Inhalt.
Tag-Auslassung Keine, sowohl der Start- als auch der End-Tag sind erforderlich.
Zulässige Eltern Jedes Element, das phrasierenden Inhalt akzeptiert.
Implizite ARIA-Rolle generisch
Erlaubte ARIA-Rollen Beliebig
DOM-Schnittstelle [`HTMLElement`](/de/docs/Web/API/HTMLElement)

Spezifikationen

Specification
HTML
# the-samp-element

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch