<samp> HTML-Beispielausgabe-Element
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Das <samp> HTML-Element wird verwendet, um eingebetteten Text einzuschließen, der eine Beispiel- (oder zitierte) Ausgabe eines Computerprogramms darstellt. Der Inhalt wird typischerweise mit der Standard-Schriftart des Browsers für Monospace-Schriften (wie Courier oder Lucida Console) dargestellt.
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 Standard-Schriftart des Browsers für das <samp>-Element zu überschreiben; es ist jedoch möglich, dass die Präferenzen des Browsers die von Ihnen angegebenen CSS-Einstellungen überschreiben.
Das CSS, um die Standard-Schriftart zu überschreiben, sieht folgendermaßen aus:
samp {
font-family: "Courier";
}
Hinweis:
Wenn Sie ein Element benötigen, das als Container für von der JavaScript Ihres Websites oder Ihrer App generierte Ausgaben 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.
<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 inklusive Benutzereingaben
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 darstellt:
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 es zu ermöglichen, das Aussehen spezifischer Teile des Beispiels anzupassen, wie die Shell-Eingabeaufforderungen und den Cursor. Beachten Sie auch die Verwendung von <kbd>, um den vom Benutzer bei der Eingabeaufforderung eingegebenen Befehl im Beispieltext darzustellen.
CSS
Das CSS, das das gewünschte Aussehen erreicht, ist:
.prompt {
color: #bb0000;
}
samp > kbd {
font-weight: bold;
}
.cursor {
color: #0000bb;
}
Dies verleiht der Eingabeaufforderung und dem Cursor eine subtile Farbgebung und betont die Tastatureingabe im Beispieltext.
Ergebnis
Die resultierende Ausgabe ist diese:
Technische Zusammenfassung
| Inhaltskategorien | Flussinhalt, Phraseninhalt, fühlbarer Inhalt. |
|---|---|
| Erlaubter Inhalt | Phraseninhalt. |
| Tag-Auslassung | Keine, sowohl das Start- als auch das End-Tag sind obligatorisch. |
| Erlaubte Eltern | Jedes Element, das Phraseninhalt akzeptiert. |
| Implizierte ARIA-Rolle |
generic
|
| Erlaubte ARIA-Rollen | Beliebig |
| DOM-Schnittstelle | [`HTMLElement`](/de/docs/Web/API/HTMLElement) |
Spezifikationen
| Spezifikation |
|---|
| HTML # the-samp-element |