Het element <kbd>

Attributen

Dit element bevat alleen de globale attributen.

Gebruiksnotities

Andere elementen kunnen samen met <kbd> worden gebruikt om specifiekere scenario's weer te geven:

• Het nesten van een <kbd>-element binnen een ander <kbd>-element geeft een daadwerkelijke toets of andere invoereenheid weer als onderdeel van een grotere invoer. Zie Toetsaanslagen binnen een invoer weergeven hieronder.
• Het nesten van een <kbd>-element binnen een <samp>-element geeft invoer weer die door het systeem is teruggekaatst naar de gebruiker. Zie Weergegeven invoer hieronder voor een voorbeeld.
• Het nesten van een <samp>-element binnen een <kbd>-element geeft juist invoer weer die gebaseerd is op tekst die door het systeem wordt gepresenteerd, zoals de namen van menu's en menu-items, of de namen van knoppen die op het scherm worden weergegeven. Zie het voorbeeld onder Schermgebaseerde invoeropties weergeven hieronder.

Voorbeelden

Basisvoorbeeld

<p>
  Use the command <kbd>help my-command</kbd> to view documentation for the
  command "my-command".
</p>

Resultaat

Toetsaanslagen binnen een invoer weergeven

Om een invoer te beschrijven die uit meerdere toetsaanslagen bestaat, kun je meerdere <kbd>-elementen nesten, waarbij een buitenste <kbd>-element de gehele invoer weergeeft en elke afzonderlijke toetsaanslag of component van de invoer is opgenomen in zijn eigen <kbd>.

Niet gestyled

Laten we eerst kijken hoe dit eruitziet als gewone HTML.

HTML

<p>
  You can also create a new document using the
  <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd> keyboard shortcut.
</p>

Dit verpakt de volledige toetsenreeks in een buitenste <kbd>-element, en vervolgens elke afzonderlijke toets in zijn eigen <kbd>, om de onderdelen van de reeks aan te duiden.

Resultaat

De uitvoer ziet er als volgt uit zonder toegepast stylesheet:

Met aangepaste stijlen

We kunnen hier meer betekenis aan geven door wat CSS toe te voegen:

CSS

We voegen een nieuwe selector toe voor geneste <kbd>-elementen, kbd>kbd, die we kunnen toepassen bij het weergeven van toetsenbordtoetsen:

kbd > kbd {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid black;
}

HTML

Vervolgens werken we de HTML bij om deze klasse te gebruiken op de toetsen in de weer te geven uitvoer:

<p>
  You can also create a new document by pressing the
  <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd> shortcut.
</p>

Resultaat

Het resultaat is precies wat we willen!

Weergegeven invoer

Het nesten van een <kbd>-element binnen een <samp>-element geeft invoer weer die door het systeem is teruggekaatst naar de gebruiker.

<p>
  If a syntax error occurs, the tool will output the initial command you typed
  for your review:
</p>
<blockquote>
  <samp><kbd>custom-git ad my-new-file.cpp</kbd></samp>
</blockquote>

Resultaat

Schermgebaseerde invoeropties weergeven

Het nesten van een <samp>-element binnen een <kbd>-element geeft invoer weer die gebaseerd is op tekst die door het systeem wordt gepresenteerd, zoals de namen van menu's en menu-items, of de namen van knoppen die op het scherm worden weergegeven.

Je kunt bijvoorbeeld uitleggen hoe je de optie "New Document" in het menu "File" kiest met HTML die er zo uitziet:

<p>
  To create a new file, choose the <kbd><kbd><samp>File</samp></kbd>
  ⇒<kbd><samp>New Document</samp></kbd></kbd> menu option.
</p>

<p>
  Don't forget to click the <kbd><samp>OK</samp></kbd> button to confirm once
  you've entered the name of the new file.
</p>

Dit bevat een interessante nesting. Voor de beschrijving van de menuoptie wordt de volledige invoer omsloten door een <kbd>-element. Vervolgens worden, daarbinnen, zowel de menu- als menu-item-namen omsloten door zowel <kbd> als <samp>, wat een invoer aanduidt die uit een schermwidget wordt gekozen.

Resultaat

Technische samenvatting

Zie ook

• <code>