Het element <samp>

Attributen

Dit element bevat alleen de globale attributen.

Gebruiksnotities

Je kunt een CSS-regel gebruiken om het standaardlettertype van de browser voor het <samp>-element te overschrijven; het is echter mogelijk dat de voorkeuren van de browser voorrang krijgen boven de CSS die je opgeeft.

De CSS om het standaardlettertype te overschrijven ziet er als volgt uit:

samp {
  font-family: "Courier";
}

Voorbeelden

Eenvoudig voorbeeld

In dit eenvoudige voorbeeld bevat een alinea een voorbeeld van de uitvoer van een programma.

<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>

Resultaat

Voorbeelduitvoer inclusief gebruikersinvoer

Je kunt het <kbd>-element nesten binnen een <samp>-blok om een voorbeeld te presenteren dat tekst bevat die door de gebruiker is ingevoerd. Bekijk bijvoorbeeld deze tekst, die een transcript van een Linux- (of macOS-)consolesessie weergeeft:

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>

Merk op dat <span> wordt gebruikt om het uiterlijk van specifieke delen van de voorbeeldtekst aan te passen, zoals de shell-prompts en de cursor. Merk ook op dat <kbd> wordt gebruikt om het commando weer te geven dat de gebruiker bij de prompt in de voorbeeldtekst heeft ingevoerd.

CSS

De CSS die het gewenste uiterlijk oplevert, is:

.prompt {
  color: #bb0000;
}

samp > kbd {
  font-weight: bold;
}

.cursor {
  color: #0000bb;
}

Dit geeft de prompt en de cursor een subtiele kleur en maakt de toetsenbordinvoer binnen de voorbeeldtekst vetgedrukt.

Resultaat

De resulterende uitvoer is als volgt:

Technische samenvatting

Zie ook

• <kbd>
• <code>
• <pre>
• <output>