<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 (beispielsweise ein Zitat). Der Inhalt wird typischerweise mit der Standardschriftart mit fester Laufweite des Browsers angezeigt (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 Standardschriftart des Browsers für das <samp>-Element zu überschreiben; es ist jedoch möglich, dass die Voreinstellungen des Browsers Vorrang vor jedem von Ihnen angegebenen 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 generierten JavaScript-Code 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 Benutzereingabe

Sie können das <kbd>-Element innerhalb eines <samp>-Blocks verschachteln, um ein Beispiel darzustellen, das vom Benutzer eingegebenen Text enthält. Betrachten Sie zum Beispiel diesen Text, der ein Transkript 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 an der Eingabeaufforderung im Beispieltext eingegeben hat.

CSS

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

css
.prompt {
  color: #b00;
}

samp > kbd {
  font-weight: bold;
}

.cursor {
  color: #00b;
}

Dies verleiht der Eingabeaufforderung und dem Cursor eine relativ subtile Farbgebung und verstärkt die Tastatureingaben innerhalb des Beispieltextes.

Ergebnis

Die resultierende Ausgabe sieht folgendermaßen aus:

Technische Zusammenfassung

Inhaltskategorien Fluß-Inhalt, Phrasierung-Inhalt, spürbarer Inhalt.
Erlaubter Inhalt Phrasierung-Inhalt.
Tag-Auslassung Keine, sowohl das Start- als auch das End-Tag sind erforderlich.
Erlaubte Eltern Jedes Element, das Phrasierung-Inhalt akzeptiert.
Implizierte ARIA-Rolle generic
Erlaubte ARIA-Rollen Beliebig
DOM-Schnittstelle [`HTMLElement`](/de/docs/Web/API/HTMLElement)

Spezifikationen

Specification
HTML Standard
# the-samp-element

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch