<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 die Ausgabe eines Computerprogramms darstellt (zum Beispiel zitierte Ausgaben). Der Inhalt wird typischerweise mit der monospaced Standardschriftart des Browsers dargestellt (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.

Anwendungshinweise

Sie können eine CSS-Regel verwenden, um die Standardschriftart für das <samp>-Element zu überschreiben; jedoch ist es möglich, dass die Einstellungen des Browsers Vorrang vor jeglichem von Ihnen spezifizierten CSS 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 von Ihrer Website oder App mittels JavaScript generierte Ausgaben dient, sollten Sie stattdessen das <output>-Element verwenden.

Beispiele

Einfaches Beispiel

In diesem einfachen Beispiel beinhaltet 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 darzustellen, das vom Benutzer eingegebenen Text enthält. Zum Beispiel könnte dieser Text ein Transkript einer Linux- (oder macOS-)Konsolsitzung präsentieren:

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 Anpassung des Erscheinungsbildes bestimmter Teile des Beispieltextes wie der Shell-Prompts und des Cursors zu ermöglichen. Beachten Sie auch die Verwendung von <kbd>, um den Befehl darzustellen, den der Benutzer am Prompt 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 führt zu einer subtilen Farbgebung des Prompts und Cursors und hebt die Tastatureingaben innerhalb des Beispieltextes hervor.

Ergebnis

Das resultierende Ausgabeergebnis ist dieses:

Technische Zusammenfassung

Inhaltskategorien Fließender Inhalt, phrasierter Inhalt, greifbarer Inhalt.
Erlaubter Inhalt Phrasierter Inhalt.
Tag-Auslassung Keine, sowohl das Start- als auch das End-Tag sind obligatorisch.
Erlaubte Eltern Jedes Element, das phrasierter Inhalt erlaubt.
Implizite ARIA-Rolle generisch
Erlaubte ARIA-Rollen Beliebige
DOM-Schnittstelle [`HTMLElement`](/de/docs/Web/API/HTMLElement)

Spezifikationen

Specification
HTML
# the-samp-element

Browser-Kompatibilität

Siehe auch