Zum Inhalt springen

HTML <samp>-Tag

Das <samp>-Tag enthält Beispiel-Ausgaben eines Computerprogramms oder Skripts. Im Browser wird der Inhalt des Tags standardmäßig in einer Monospace-Schriftart angezeigt.

Das <samp>-Tag ist ein Phrasierungs-Inhaltselement, das anzeigt, dass ein Textabschnitt eine strukturelle Bedeutung hat.

Mit CSS können Sie einen besseren Effekt erzielen, auch wenn das <samp>-Tag nicht als veraltet gilt.

Die Standardschriftart des Browsers kann durch eine CSS-Regel für das <samp>-Tag überschrieben werden, typischerweise unter Verwendung der Eigenschaft font-family. Browser-Einstellungen oder User-Agent-Stylesheets können jedoch Vorrang vor jeder angegebenen CSS haben.

Sie können das <output>-Tag anstelle von <samp> verwenden, wenn ein Element als Container für die Ausgabe dienen soll, die von der Website oder JavaScript-Code erstellt wurde.

Syntax

Das <samp>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<samp>) und dem schließenden (</samp>)-Tag geschrieben.

Beispiel für das HTML <samp>-Tag:

HTML <samp>-Tag

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>You see an ordinary text here. <samp>But this is a sample text.</samp> And another ordinary text.</p>
  </body>
</html>

Ergebnis

samp tag example

In HTML gibt es weitere Elemente zur Auszeichnung von Teilen eines technischen Dokuments: Das <code>-Tag wird zur Definition von Programmquellcode verwendet, das <kbd>-Tag zur Angabe von Tastatureingaben und das <var>-Tag zur Kennzeichnung von Variablen. Während sowohl <code> als auch <samp> Monospace-Schriftarten verwenden, repräsentiert <code> den eigentlichen Quellcode, während <samp> die Ausgabe dieses Codes darstellt.

Attribute

Das <samp>-Tag unterstützt die Globalen Attribute und die Ereignisattribute.

So stylen Sie ein HTML <samp>-Tag

css
samp {
  /* Overrides the default monospace font */
  font-family: Arial, sans-serif;
  color: #333;
}

Praxis

Was ist der Zweck des HTML <samp>-Tags und wie wird es verwendet?

Finden Sie das nützlich?

Dual-run-Vorschau — vergleichen Sie mit den Symfony-Routen live.